直接上代码:
参考:http://www.cnblogs.com/zishang91/p/8507485.html
小程序静态页面代码
<scroll-view class="container" scroll-y style="padding-top:0">
<view wx:for="{{img}}" class="list-item" wx:key="index">
<image class="list-img" lazy-load src="{{lazyloadArr[index] ? item : '/images/default.png'}}"></image>
<view>图片{{index}}</view>
</view>
</scroll-view>
App.js
//app.js
App({
onLaunch: function () {
var _this = this;
wx.getSystemInfo({
success: function(res) {
_this.globalData.windowWidth = res.windowWidth;
_this.globalData.windowHeight = res.windowHeight;
},
})
},
globalData: {
userInfo: null,
windowWidth: 0,
windowHeight: 0,
}
})
JS代码
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
img: [
"https://picsum.photos/500/300?image=100",
"https://picsum.photos/500/300?image=101",
"https://picsum.photos/500/300?image=102",
"https://picsum.photos/500/300?image=103",
"https://picsum.photos/500/300?image=104",
"https://picsum.photos/500/300?image=106",
"https://picsum.photos/500/300?image=107",
"https://picsum.photos/500/300?image=108",
"https://picsum.photos/500/300?image=109",
"https://picsum.photos/500/300?image=110",
"https://picsum.photos/500/300?image=111",
"https://picsum.photos/500/300?image=112",
"https://picsum.photos/500/300?image=113",
"https://picsum.photos/500/300?image=114",
"https://picsum.photos/500/300?image=115",
"https://picsum.photos/500/300?image=116",
"https://picsum.photos/500/300?image=117",
"https://picsum.photos/500/300?image=118",
"https://picsum.photos/500/300?image=119",
"https://picsum.photos/500/300?image=120",
"https://picsum.photos/500/300?image=121",
"https://picsum.photos/500/300?image=122",
"https://picsum.photos/500/300?image=123",
"https://picsum.photos/500/300?image=124",
"https://picsum.photos/500/300?image=126",
"https://picsum.photos/500/300?image=127",
"https://picsum.photos/500/300?image=128",
"https://picsum.photos/500/300?image=129"
],
lazyloadArr: [],
lazyloadHeightArr: [],
},
onLoad: function() {
let _this = this;
let _arr = _this.data.lazyloadArr;
let _imgArr = _this.data.img;
_imgArr.forEach(function(item,index) {
_arr.push(false);
})
_this.setData({
lazyloadArr: _arr
})
},
onReady: function () {
let _this = this;
setTimeout(function() {
_this.getRect()
}, 1000)
},
getRect: function() {
var _this = this;
wx.createSelectorQuery().select('.list-item').boundingClientRect(function(rect) {
_this.setData({
itemHeight: rect.height
})
_this.init(rect.height)
}).exec();
},
init: function(itemHeight) {
let _this = this;
let _arr = _this.data.lazyloadArr;
let _arrHeight = _this.data.lazyloadHeightArr;
let index = parseInt(app.globalData.windowHeight / itemHeight);
// 获取未滚动时整屏显示的行数,每行有两个,故 *2 这屏的先加载
for(let i = 0; i < index * 2; i++) {
_arr[i] = true
}
// 遍历每个图片相对于顶部的高度
for(let i = 0; i < _arr.length; i++) {
_arrHeight[i] = Math.floor(i) * (itemHeight + 10)
}
_this.setData({
lazyloadArr: _arr,
lazyloadHeightArr: _arrHeight
})
},
onPageScroll: function(e) {
let _this = this;
let _arrHeight = _this.data.lazyloadHeightArr;
let _arr = _this.data.lazyloadArr;
for(let i = 0; i < _arrHeight.length; i++) {
if(_arrHeight[i] < e.scrollTop + app.globalData.windowHeight) {
if(_arr[i] === false) {
_arr[i] = true;
}
}
}
_this.setData({
lazyloadArr: _arr
})
},
})
如果需要翻页的话:
在调用接口返回成功中写入如下代码
let dataList= res.data.data.dataList;
// 懒加载
let _arr = _this.data.lazyloadArr;
let _arrHeight = _this.data.lazyloadHeightArr;
// 懒加载
dataList.forEach(function(item,index) {
_arr.push(false);
})
let itemHeight = _this.data.itemHeight;
// 遍历每个图片相对于顶部的高度
for(let i = 0; i < _arr.length; i++) {
_arrHeight[i] = Math.floor(i) * (itemHeight + dataList.length)
}
_this.setData({
list: dataList,
lazyloadArr: _arr, // 懒加载数组
lazyloadHeightArr: _arrHeight, // 懒加载高度数组
})