此功能是利用轮播功能,左右滑动,导航菜单能按顺序展示
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
});
});
},