在做一个短视频平台,涉及到的都是一些列表模块。因为小程序没有提供lazyload api,所以只能自己写一个了。。。
开发涉及 <scroll-view></scroll-view>滚动机制及queryMultipleNodes方法,不清楚的请自行查阅api文档。
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 },
效果:
更多专业前端知识,请上 【猿2048】www.mk2048.com