前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序截取数组每三个为一组渲染

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

作者头像
明知山
发布2020-09-03 10:50:39
1.3K0
发布2020-09-03 10:50:39
举报
文章被收录于专栏:前端开发随笔
在这里插入图片描述
在这里插入图片描述

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

代码语言:javascript
复制
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
    })
  },
代码语言:javascript
复制
    <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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/12/06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档