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

最新推荐文章于 2023-09-08 18:14:14 发布

HqL丶1024

最新推荐文章于 2023-09-08 18:14:14 发布

阅读量2.7k

点赞数

分类专栏： Wechat_Applet

本文链接：https://blog.csdn.net/hql1024/article/details/103453772

版权

Wechat_Applet 专栏收录该内容

121 篇文章 13 订阅

订阅专栏

在这里插入图片描述

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>

.carousel {
    position: relative;
}

.swiper {
    width: 100%;
    height: 650rpx;
    background: #FFF;
    padding: 30rpx 20rpx 20rpx;
    box-sizing: border-box;
    box-shadow: 0px 3rpx 20rpx 0px #DEDEDE;
    border-radius: 20rpx;
}

.dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15rpx;
}

.dot {
    width: 10rpx;
    height: 6rpx;
    border-radius: 3rpx;
    margin: 0 5rpx;
    background-color: #DEDEDE;
}

.active {
    width: 20rpx;
    background-color: #0C6D4A;
}