微信小程序截取数组每三个为一组渲染

时间:2022-07-24
本文章向大家介绍微信小程序截取数组每三个为一组渲染,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

后端将一个数组传给我们,需求要把它们进行切割在进行展示,还有自定义swiper指示点,都会在代码里进行输写

data:{
   currentSwiper: 0,
   recom_list: [{
        avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
        name: '小禾',
        college: '圣迪斯哥美容博士',
        praise: '666',
        advisory: '999'
      },
      {
        avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
        name: '小禾',
        college: '圣迪斯哥美容博士',
        praise: '666',
        advisory: '999'
      },
      {
        avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
        name: '小禾',
        college: '圣迪斯哥美容博士',
        praise: '666',
        advisory: '999'
      },
      {
        avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
        name: '小禾',
        college: '圣迪斯哥美容博士',
        praise: '666',
        advisory: '999'
      },
      {
        avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
        name: '小禾',
        college: '圣迪斯哥美容博士',
        praise: '666',
        advisory: '999'
      }
    ],
  }
  //切割数组
  onLoad(){
  this.getrecom()
  }
  getrecom() {
    var result = []
    for (var i = 0; i < this.data.recom_list.length; i += 3) {
      result.push(this.data.recom_list.slice(i, i + 3));
    }
    this.setData({
      recom_list: result
    })
    console.log(this.data.recom_list)
  },
  // 通过下标改变指示点
  swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  },
    <view class="carousel">
        <swiper class="swiper" bindchange="swiperChange">
            <swiper-item wx:for="{{recom_list}}" wx:for-item="item" wx:for-index="index" wx:key>
                <view class="info" wx:for="{{item}}" wx:for-item="row" wx:for-index="i" wx:key>
                    <view class="avatar">
                        <image src="{{row.avatar}}"></image>
                    </view>
                    <view class='row'>
                        <view class="title">{{row.name}}</view>
                        <view class='col'>{{row.college}}</view>
                        <view class="bottom">
                            <view>好评数:{{row.praise}}</view>
                            <view>咨询量:{{row.advisory}}</view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <!--自定义指示点-->
        <view class="dots">
            <block wx:for="{{recom_list}}" wx:key>
                <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
            </block>
        </view>
    </view>