类似京东Plus福利介绍的一个小功能
时间：2023-04-05 13:29:54
HTML5
#nav{height:100%;.swiper-wrapper{高度：100%；li{文本对齐：居中；高度：100%；显示：弹性；对齐项目：居中；证明内容：居中；&.active-nav{颜色：#fff;背景：#ddd！重要；}&.active-nava{颜色：#fff;背景：#ddd！重要；}}}}公司最近要开发一套在线付费会员App，是和原来的混合开发。有一个会员权限模块，全部使用H5开发，想展示给大家需要完成的案例如下：其实没什么难度，主要功能是：1.顶部导航栏可以滑动左右，点击某栏按钮切换内容；2.加载一次后，会重新加载第二次；3.点击的列按钮居中显示，左右会跟随点击的位置滚动4.手机物理返回按钮对路由的影响感觉自己表达的不是特别清楚。下面动图：好了，废话不多说，开始说代码相关的事情是：顶部导航的实现：使用swiper3实现导航回弹和左右滑动效果htmlcontent::{{i.title}}
我使用vuejs循环渲染liswiper.js调用：varmyNav=newSwiper('#nav',{freeMode:true,freeModeMomentumRatio:0.5,slidesPerView:'3',});让swiperWidth=myNav.container[0].clientWidth让maxTranslate=myNav.maxTranslate();让maxWidth=-maxTranslate+swiperWidth/2myNav.on("tap",function(swiper,e){让slide=swiper.slides[swiper.clickedIndex]让slideLeft=slide.offsetLeft让slideWidth=slide.clientWidth让slideCenter=slideLeft+slideWidth/2;//被电影slide的中心点myNav.setWrapperTransition(300)if(slideCenter
maxWidth){myNav.setWrapperTranslate(maxTranslate)}else{让nowTlanslate=slideCenter-swiperWidth/2myNav.setWrapperTranslate(-nowTlanslate)}})上面的代码可以满足1和3的要求，我上传的代码不是很完整。详细代码我会附上github地址接下来看第二个需求，即点击加载一次后，再次点击不会重新加载。这里我使用vue-router的结构如下：>{{i.title}} 