微信小程序之使用上拉加载实现图片懒加载

在微信小程序中，有2个事件，相信大家都很熟悉
下拉重新加载
上拉加载更多
事件是这么个事件，至于事件触发后干嘛，那就看代码了
首先要在对应得地方xxxxpage.json打开这个

  "onReachBottomDistance": 100
1

至于这个值100还是多少要看你的实际情况，为了不让用户看到默认的框框啥的，应该是设置大一些！
xxxpage.js中

  onReachBottom(){
  //组件的class="lazyimage"
    var child =this.selectComponent('.lazyimage');
    if(child){
      child.onScrollIndex();//告知懒加载组件，触发了上拉触底事件
    }else{
      console.log(this);
    }
  }
1
2
3
4
5
6
7
8
9

然后就是我们的组件代码了 比如命名为lazyimage
lazyimage.js

// components/goodsParse/goodsParse.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    parseData: {
      type: Array,
      value: []
    },
    param: {
      type: String
    },
    scrollindex:{
      type:Number,
      value:0,
      default:0
    },
    lazyload:{
      type:Boolean,
      value:false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    imageCount: 0,
    imagedatas:[],
    loadcount:0,
    current_load_height:0,//本次渲染的图片的总高度 如果本次渲染的总高度不足1500 则会再次渲染per_load_count
    current_loaded_ok:false,//本次是否渲染完成
    per_load_min_height:1500,//每次至少渲染多少高度
    per_load_count:3//每次渲染的张数，如果渲染的总高度不足，会继续渲染
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleImgtap() {

    },
    onImageLoad(e) {
      this.data.imageCount ++
      //又不用渲染UI 所以下面的代码没必要
      // this.setData({
      //   imageCount: this.data.imageCount
      // })

      if(e.detail){
        if(e.detail.height){
          //本张图片渲染的高度
          this.data.current_load_height+=e.detail.height;
        }
      }

      if(this.data.lazyload){
      //本次懒加载的图片已经加载完成了
      if(this.data.imageCount == this.data.loadcount){
        this.data.current_loaded_ok=true;
         this.triggerEvent('onImageLoad', this.data.imageCount);

         //未完待续 如果还可以继续加载，如果刚刚加载的总高度小于屏幕的总高度，则继续贪婪加载
         if(this.data.current_load_height<this.data.per_load_min_height){
           //本次渲染的高度太小了，看看是否可以继续渲染，再次渲染3张
           this.loadNext(this.data.per_load_count);
         }
      }
      }else{
        //非懒加载
        if(this.data.imageCount == this.data.imagedatas.length){
          this.triggerEvent('onImageLoad', this.data.imageCount);
        }
      }


      //如果渲染不够，还可以继续渲染
      // console.log(e);//可以通过e来计算本次加载是否足够，不够的话补足剩余的数量
    },
    loadNext(num){
      if(this.data.loadcount<this.data.imagedatas.length){
        //渲染接下来的N个？
        var _max = this.data.imagedatas.length;
        if(this.data.loadcount<(_max)){
          this.data.current_load_height=0;
          var _temptop = Math.min(this.data.loadcount+num,(_max));
          // console.log('loadcount',this.data.loadcount,'images',this.data.imagedatas.length,'temp',_temptop);
          if(_temptop>this.data.loadcount){
            var _new_array=new Array();
            var _datas =this.data.imagedatas;
            for(var k=this.data.loadcount;k<_temptop;k++){
              if(this.data.imagedatas.length>k){
                _new_array.push(
                  {
                    vkey:'imagedatas['+k+'].src',
                    src:_datas[k].presrc
                  }
                );
              }
            }
            if(_new_array.length>0){
              var _obj={};
              for(var ii of _new_array){
                _obj[ii.vkey]=ii.src
              }
              this.setData(_obj);
              // console.log('set new images src!');
            }
            this.data.loadcount = _temptop;
          }
        }
      }
    },
    onScrollIndex(){
      //这个函数是给外部调用的，一般发生在上拉触底(要基于实际去设定这个高度值)的时候
      if(this.data.imagedatas.length ==this.data.loadcount){
        // console.log('已经全部完成渲染，无法继续执行更多的懒加载');
        //已经全部懒加载完成，不需要继续加载了
        return;
      }
      if(!this.data.current_loaded_ok){
        // console.log('上一次的渲染未完成··· ·· ·');
        return;
      }
      // console.log('parent`s scroll-view scroll to lower!');
      if(this.data.imageCount<this.data.loadcount){
        // console.log('之前加载的图片还未完全加载完成');
        return;
      }
      this.loadNext(this.data.per_load_count);
    },
    requireLoadAll(){
      //父级页面要求加载全部
      if(this.data.loadcount != this.data.imagedatas.length){
        var _n = this.data.imagedatas.length-this.data.loadcount;
        if(_n>0){
          if(!this.data.current_loaded_ok){
            // console.log('上一次的渲染未完成··· ·· ·');
            return;
          }
          // console.log('parent`s scroll-view scroll to lower!');
          if(this.data.imageCount<this.data.loadcount){
            // console.log('之前加载的图片还未完全加载完成');
            return;
          }
          this.loadNext(_n);
        }
      }
    }
  },
  attached(){
    // console.log('load goods-parse attached!');
    var _lazyload=this.data.lazyload;
    if(this.data.parseData!=null && this.data.parseData.length>0){
      var _imgarray=new Array();
      var _i =0;
      for(var img of this.data.parseData){
        _i ++;
        if(_i<= this.data.per_load_count || !_lazyload){
        _imgarray.push({
          src:img,
          presrc:img
        });
      }else{
        _imgarray.push({
          src:null,
          presrc:img
        });
      }

      }
      this.data.loadcount =this.data.per_load_count;//当前有渲染的序号
      this.setData({
        imagedatas:_imgarray
      });
      console.log(_imgarray);
    }
  }
})
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

对应的lazyimage.wxml代码如下(这个看你的实际情况修改)

<view class="parse_box">
    <block >
        <view class="u-padding-top-10" style="font-size:0px;">
            <block wx:if="{{parseData}}">
                <view>
                    <block wx:for="{{imagedatas}}" wx:for-item="item" wx:for-index="index" wx:key="index">
                        <block wx:if="{{item.src}}">
                            <image class="parse_image" src="{{item.src}}" mode="widthFix" bindload="onImageLoad" binderror="onImageLoad"/>
                        </block>
                    </block>
                </view>
            </block>
        </view>
    </block>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

至于样式就不贴了！
这个组件适用于单图横向100vw的模式，比如商品的图片列表纵向显示
关键点在于
图片数据是parseData
比如:
[“https://xxx.jpg”,“https://xxx.jpg”]
转化成imagedatas
比如
[{
presrc:“”,
src:null
}]
除了一开始的数量设置src为对应的图片地址，后面的都是设置null
然后在上拉触底事件触发的时候，再把后面的图片对象设置src=presrc！

然后就是高度的判断，有可能比如你配置每次加载3张图，如果这三张图的高度不够一屏，那体验上用户就能看到图片还在加载了！
所以代码上做了一个贪婪模式，就是图片load后，去计算本次加载的总高度，是否满足，不够的话再多懒加载一次！
看函数代码

 onImageLoad(e) {
      this.data.imageCount ++
      //又不用渲染UI 所以下面的代码没必要
      // this.setData({
      //   imageCount: this.data.imageCount
      // })

      if(e.detail){
        if(e.detail.height){
          //本张图片渲染的高度
          this.data.current_load_height+=e.detail.height;
        }
      }

      if(this.data.lazyload){
      //本次懒加载的图片已经加载完成了
      if(this.data.imageCount == this.data.loadcount){
        this.data.current_loaded_ok=true;
         this.triggerEvent('onImageLoad', this.data.imageCount);

         //未完待续 如果还可以继续加载，如果刚刚加载的总高度小于屏幕的总高度，则继续贪婪加载
         if(this.data.current_load_height<this.data.per_load_min_height){
           //本次渲染的高度太小了，看看是否可以继续渲染，再次渲染3张
           this.loadNext(this.data.per_load_count);
         }
      }
      }else{
        //非懒加载
        if(this.data.imageCount == this.data.imagedatas.length){
          this.triggerEvent('onImageLoad', this.data.imageCount);
        }
      }


      //如果渲染不够，还可以继续渲染
      // console.log(e);//可以通过e来计算本次加载是否足够，不够的话补足剩余的数量
    },
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