Sow nothing reap nothing

微信小程序滑块视图swiper遍历显示多个内容简单实现

已有2,555次关注

微信小程序滑块视图swiper遍历显示多个内容简单实现.gif

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});
  }

})

已自动关闭评论