微信小程序分组列表竖向轮播图 - Grouped List with Vertically Scrolled Swiper

1.png

2.png

<view class="friends">
    <view class="txt-friends-title">拼友</view>
    <swiper vertical circular autoplay class="friends-list">
      <block wx:for="{{ participants }}" wx:key="*this" wx:for-item="group">
        <swiper-item >
        <block wx:for="{{ group }}" wx:key="*this">
        <view class="friend flex-space-between">
          <view class="friend-left">
            <view class="flex-start">
              <view class="img-friend-avatar">
                <image src="{{ item.header || 'https://www.iumer.cn/ymp/css/image/miniapp/默认头像@3x.png' }}" /></view>
              <view class="txt-userinfo">
                <view class="txt-username">{{ item.name }}</view>
                <view class="txt-phone">{{ item.phone}}</view>
              </view>
            </view>
          </view>
          <view class="friend-right">{{ item.createDate }}<text class="txt-status">参团</text></view>
          </view>
        </block>
        </swiper-item> 
      </block>
    </swiper>
  </view>

{
  load_participants: function () {
    var that = this;
    wx.request({
      url: app.globalData.webservice_url + '/biz/activity/activityPartticipantList',
      data: JSON.stringify(app.encode({
        activityId: that.data.activityid,
        businessId: that.data.tab === 1 ? wx.getStorageSync('businessId') : "",
        userId: that.data.tab === '0' ? wx.getStorageSync("userId") : "",
      })),
      method: 'POST',
      header: {
        'X-Token': wx.getStorageSync('token')
      },
      success: function (res) {
        if (res.data.code === 1) {
          if (res.data.data) {
            var participants = [];
            var group = [];
            res.data.data.forEach(function(el, idx) {
              group.push(el); 
              if (idx % 3 === 2) {
                participants.push(group);
                group = [];
              }               
            })
            if (group.length > 0) {
              participants.push(group);
            }
            that.setData({
              participants: participants
            })
          } else {
            that.setData({
              participants: []
            })
          }
        } else {
          app.showModal('提示', res.data.desc);
        }
      },
      fail: function (res) {
        app.showModal('提示', res.errMsg);
      },
      complete: function (res) {
        console.log(res);
      }
    })
  },
}