微信小程序双瀑布流布局+动态懒加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
          <!-- 内容部分 -->
          <view class="container" >
            <view id="left">
              <view  class="listWrap" wx:for="{{leftList}}" catchtap="bottomButton" data-id="{{item.id}}" >
                  <image src="{{item.imglist[0]}}"mode='{{item.mode=="screenshot"?"aspectFill":"widthFix"}}' style="max-height:400rpx;height:340rpx;" ></image>
                  <text class="listText">{{item.title}}</text>
              </view>
            </view>
            <view id="right">
              <view class="listWrap" wx:for="{{rightList}}" wx:key="index" catchtap="bottomButton" data-id="{{item.id}}">
                  <image src="{{item.imglist[0]}}" mode='{{item.mode=="screenshot"?"aspectFill":"widthFix"}}' style="max-height:400rpx;height:340rpx;" ></image>
                  <text class="listText">{{item.title }}</text>
              </view>
            </view>
          </view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 // 1.调用接口获取信息
  getDataList() {
    let that = this;
    let timestamp = Date.parse(new Date()) / 1000;
    const data = {
      page: that.data.page.toString(),
      t: timestamp,
      openid: that.data.openId
    }
    // 调用秘钥方法
    let sign = CryptoJS.AesEncryptECB(JSON.stringify(data))
    wx.request({
      url: 'http://xxxxx?',
      data: { ...data, sign },
      method: 'GET',
      header: {
        'content-type': 'application/xml'
      },
      success: function (res) {
        let resData = res.data.data;
        // 获取图片信息
        that.getImgData(resData, 0);
      },
      fail: function (err) {
        console.log(err)
      },
    })
  },

  // 获取图片尺寸，判断image的mode属性，
  // 如果长宽比例 > 1.5 则使用aspectFill，否则使用widthFix
  getImgData(resData, index) {
    let that = this;
    if (index < resData.length) {
      wx.request({
        url: resData[index].imglist[0].split('@base')[0]+'@base@tag=imageInfo',
        method: 'GET',
        header: {
          'content-type': 'application/xml'
        },
        success: function (res) {
          if (res.data.height / res.data.width > 1.5) {
            resData[index].mode = 'screenshot';
            index += 1
            that.getImgData(resData, index)
          } else {
            resData[index].mode = '';
            index += 1
            that.getImgData(resData, index)
          }
        },
        fail: function (err) {
          console.log(err)
        },
      })
    } else {
      that.setData({
        dataList: that.data.dataList.concat(resData),
      })
      // 调用瀑布流布局方法
      that.isLeft();
    }
  },

  /* 首页瀑布流布局 */
  // 判断左右插入
  async isLeft() {
    const { dataList, leftList, rightList } = this.data;
    let newDataList = dataList.slice(-10);
    query = wx.createSelectorQuery();
    for (const item of newDataList) {
      leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item);
      //判断两边高度，来觉得添加到那边
      await this.getBoxHeight(leftList, rightList);
    }
  },

  // 布局对比
  getBoxHeight(leftList, rightList) { //获取左右两边高度
    return new Promise((resolve, reject) => {
      this.setData({ leftList, rightList }, () => {
        query.select('#left').boundingClientRect();
        query.select('#right').boundingClientRect();
        query.exec((res) => {
          leftHeight = res[0].height; //获取左边列表的高度
          rightHeight = res[1].height; //获取右边列表的高度
          resolve();
        });
      });
    })
  },

  // 通过监听滚动条，动态加载数据
  /* onPageScroll: tools.throttle(function (res) { */ // 引入外部节流函数
  onPageScroll: function (res) {
    let scrollTop = res.scrollTop;
    if (scrollTop >= this.data.scrollHight) {
      console.log("加载下一页")
      this.setData({
        scrollHight: this.data.scrollHight + 800
      })
      this.getDataList()
    }
  },