微信小程序菜单轮播翻页

此功能是利用轮播功能，左右滑动，导航菜单能按顺序展示

wxml

<swiper indicator-dots interval="5000" duration="300" class="swiper-box" 
style="height:430rpx;width:100%;">
   <swiper-item class="row wrap" wx:for="{{dt.lbSellerCatsLen}}" 
   wx:for-index="i" wx:key="index">
     <view class="textcenter m-tb-30" style="width:20%;" bindtap="category" 
     data-cateid="{{item.category_id}}" wx:for="{{dt.lbSellerCats}}" wx:for-index="j" 
     wx:if="{{ ( j >= ( i-0 )*10 ) && ( j < (i+1) * 10 ) }}" wx:key="key">
       <image src="{{item.image.file_path}}" mode="aspectFit" style="width:94rpx;height:94rpx;"></image>
       <view class="c333 f28 one-text">分类名称</view>
     </view>
   </swiper-item>
 </swiper>
 

js

/**分类 */
 getCategoryList(){
   let _this = this;
   App._get('category/index', {}, result => {
     let data = result.data;
     var list = data.list;
     var dl = (list.length % 10 === 0) ? parseInt((list.length / 10)) : (parseInt((list.length / 10)) + 1)
     var dt = {
       lbSellerCats: list,               //获取到需要遍历的所有数据
       lbSellerCatsLen: dl,              //通过上面的三目运算获取共需要分页的页数
     }
     _this.setData({
       dt,
       templet: data.templet,
       curNav: data.list.length > 0 ? data.list[0].category_id : true,
       notcont: !data.list.length
     });
   });
 },