wxml代码:
<swiper class="sell_swiper" indicator-dots="{{true}}">
<swiper-item class="sell_slide" wx:for="{{dataLength}}" wx:for-index="i" wx:key="index">
<view class="slide_item" wx:for="{{dataArr}}" wx:key="index" wx:for-index="j" wx:if="{{(j >= (i - 0) * divsion) && (j < (i + 1) * divsion)}}">
<text>{{j + 1}}</text>
</view>
</swiper-item>
</swiper>
wxss代码:
.sell_swiper{height: 360rpx;margin: 0 30rpx;}
.sell_slide{display: flex;justify-content: space-between;}
.slide_item{width: 31%;background-color: rgba(223, 225, 230, .4);display: flex;align-items: center;justify-content: center;}
.slide_item text{color: #25AAFF}
/* 指示点颜色 */
.sell_swiper .wx-swiper-dot::before{background: rgba(223, 225, 230, .5);}
.sell_swiper .wx-swiper-dot-active::before{background: #25AAFF;}
.sell_swiper .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom: 10rpx;}
js代码:
Page({
/**
* 页面的初始数据
*/
data: {
dataArr: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15], // mock数据
dataLength: null,
divsion: 3 // 三条数据一个swiper-item
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let { dataArr } = this.data;
let dataLength = (dataArr.length % divsion === 0) ? (dataArr.length / divsion) : ((dataArr.length / divsion) + 1); // 计算分页数
this.setData({dataLength});
}
})