码迷,mamicode.com
首页 > 微信 > 详细

小程序 - 图片列表显示lazyload效果

时间:2018-09-19 13:32:27      阅读:349      评论:0      收藏:0      [点我收藏+]

标签:VID   nbsp   轮播   assets   技术分享   select   fixed   port   selector   

在做一个短视频平台,涉及到的都是一些列表模块。因为小程序没有提供lazyload api,所以只能自己写一个了。。。

开发涉及 <scroll-view></scroll-view>滚动机制及queryMultipleNodes方法。

html:

1 <swiper-item class=‘slider-swiper‘ style=‘height:100%‘>
2   <scroll-view scroll-y=‘true‘ style="height:100%" lower-threshold=‘200‘ bindscroll="view_scroll" bindscrolltolower=‘scrollHandler‘>
3  <block wx:for="{{star_list}}">
4      <view class=‘video‘>
5              <image src=‘{{index < lazyIndex  ? item.photo.thumb : "/assets/img/default_img.jpg"}}‘ />  //如果当前图片索引小于lazyIndex则使用默认图片
6               </view>
7     </block>
8   </scroll-view>
9 </swiper-item>

js:

 1 // 获取列表到顶部的距离
 2   queryMultipleNodes: function () {
 3     var query = wx.createSelectorQuery()
 4     query.select(‘#lazyStarts‘).boundingClientRect()
 5     query.selectViewport().scrollOffset()
 6     query.exec(function (res) {
 7       fixedHei = res[0].top // 获取列表到顶部的距离
 8     })
 9   },
10   //  理解思路:获取可视区域。距离顶部的距离减去固定高度(导航、轮播、话题)。除播映列表高度,从而获取到index,由index设置列表lazyload
11   view_scroll: function (e) {
12     let cls = this;
13     wx.getSystemInfo({
14       success: function (res) {
15         wHeight = res.windowHeight
16       },
17     })
18     if (parseInt(e.detail.scrollTop) > parseInt(wx.getStorageSync(‘shei‘))) {
19       wx.setStorageSync(‘shei‘, e.detail.scrollTop); //设置缓存,用于在二次打开后,去除lazyload效果
20       let scrollTop = (e.detail.scrollTop) - fixedHei; //滚动的高度减去列表到顶部的距离,间接的得到列表滚动距离
21       let lazy_index = Math.ceil((scrollTop / 303.6)); //通过滚动的距离除上每张图片的高度,从而获取当前列表的index
22       cls.setData({
23         lazyIndex: lazy_index + 2 //用于设置index延迟,可根据自己的情况修改
24       })
25     }
26   },

效果:

技术分享图片

 

小程序 - 图片列表显示lazyload效果

标签:VID   nbsp   轮播   assets   技术分享   select   fixed   port   selector   

原文地址:https://www.cnblogs.com/battle-wang/p/9674026.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!