看见网上很多人的思路都是监听页面的滚动事件,判断元素距离页面的top值是否是小于等于页面的可视高度,小于的话显示一张加载的图片,大于的话就显示原来的图片,这种方式有时候滑动过快的时候,图片会一直加载,不知道其他人有没有这种现象
主要用到的是小程序的获取节点信息:createSelectorQuery和节点相交状态:createIntersectionObserver,不熟悉的可以看一下这篇博客:createSelectorQuery用法介绍
<view class="people-list-wrap">
<view class='people-list clearfix' id="J_peopleList">
<view class='item item-{{index}}' wx:for="{{imageList}}" wx:key="*this.src">
<view class='a'>
<view class='item-wrap'>
<view class='img'>
<image src='{{item.show ? item.src : item.space}}' class='{{item.show ? "active" : ""}}'></image>
</view>
</view>
</view>
</view>
</view>
</view>
const { imageProPath } = require('../../utils/imageUrlUtil.js');
Page({
/**
* 页面的初始数据
*/
data: {
//图片主路径
imagePath: imageProPath,
//获取当前页面高度
screeHeight:'',
imageList: [
{ src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
{ src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855976846&di=6ef3daf839acf7b60999dc7eaa0cd12e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F10%2F35%2F01300535207006136924355481012.jpg"},
{ src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855976846&di=6ef3daf839acf7b60999dc7eaa0cd12e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F10%2F35%2F01300535207006136924355481012.jpg"},
{ src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
{ src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
{ src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
{ src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
{ src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855976846&di=6ef3daf839acf7b60999dc7eaa0cd12e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F10%2F35%2F01300535207006136924355481012.jpg"},
{ src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855976846&di=6ef3daf839acf7b60999dc7eaa0cd12e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F10%2F35%2F01300535207006136924355481012.jpg"},
{ src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
{ src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
{ src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
{ src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
{ src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
{ src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
{ src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
{ src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
{ src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
{ src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
{ src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
]
// { src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" },
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let imageList = this.data.imageList // 获取原数据
for (let i in this.data.imageList){
// 给每一个item追加一个属性,默认不显示
this.data.imageList[i].show = false
this.data.imageList[i].space = ''
console.log(this.data.imageList[i])
console.log(wx.createIntersectionObserver())
wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe('.item-'+ i, (res) => {
if (res.intersectionRatio > 0){
imageList[i].show = true
imageList[i].space = 'https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif'
}
this.setData({ // 更新数据
imageList
})
})
}
},
showImg(){ // 判断高度是否需要加载
wx.createSelectorQuery().selectAll('.item').boundingClientRect((res) => {
const imageList = this.data.imageList
const screeHeight = this.data.screeHeight
res.forEach((item, index) => {
if (item.top < screeHeight) {
imageList[index].show = true
imageList[index].space = 'https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif'
}
})
this.setData({
imageList
})
}).exec()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
})
/* pages/libraryintroduction/libraryintroduction.wxss */
.library-introduction-main-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 2548rpx;
}
.people-list-wrap {
min-height: 400rpx;
width: 100%;
margin-top: 10rpx;
overflow: hidden
}
.people-list-wrap .people-list {
width: 100%;
margin: 0 auto;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10rpx;
box-sizing: border-box;
}
.people-list-wrap .people-list .item {
width: 600rpx;
height: 288rpx;
position: relative;
margin-bottom: 20rpx;
}
.people-list-wrap .people-list .item .a {
display: block;
text-decoration: none;
height: 100%;
width: 100%
}
.people-list-wrap .people-list .item image {
width: 100%;
height: 228rpx;
transition: all .2s ease-in-out;
opacity: 0;
}
.people-list-wrap .people-list .item image.active {
opacity: 1
}
.people-list-wrap .people-list .item .info {
padding-left: 10rpx
}
.people-list-wrap .people-list .item .info .name {
color: #666;
margin-right: 5rpx
}
.people-list-wrap .people-list .item-wrap {
width: 228rpx;
height: 288rpx;
position: absolute;
float: left;
border: 1rpx solid #a0a0a0;
background-color: #fff;
-webkit-transition-property: width height border margin z-index;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-property: width height border margin z-index;
-moz-transition-duration: .2s;
-moz-transition-timing-function: ease-in-out;
-ms-transition-property: width height border margin z-index;
-ms-transition-duration: .2s;
-ms-transition-timing-function: ease-in-out;
-o-transition-property: width height border margin z-index;
-o-transition-duration: .2s;
-o-transition-timing-function: ease-in-out;
transition-property: width height border margin z-index;
transition-duration: .2s;
transition-timing-function: ease-in-out
}