uniapp h5 图片懒加载

Finaina

已于 2023-12-07 15:51:39 修改

阅读量785

点赞数 15

文章标签： uni-app 前端 vue.js

于 2023-12-05 11:00:46 首次发布

本文链接：https://blog.csdn.net/csdnlff/article/details/134800976

版权

参考博文

https://www.cnblogs.com/websmile/p/11662933.html?ivk_sa=1024320u

生命周期函数 onPageScroll 无效 多次尝试后仍无法监听生效

替代方法 - 使用scroll-view的onScroll

onScroll

onScroll(e) {
	console.log('onScroll', e)
	this.load()
},

data

show: false,
windowHeight:0

template

<scroll-view scroll-y="true" @scroll="onScroll">
 
    <view style="height: 100vh;background-color: aliceblue;">
 
        <view style="display: flex;flex-wrap: wrap;padding-bottom: 100px;">
            <view v-for="(item,index) in list" :key="item.id" class="vote_box"
                :id="'the-'+item.id">
                <view @click="toDetail(item)">
                    <image class="vote-img" :class="{lazy:!item.show}" :data-index="index"
                        :src="item.show&&item.headUrl?imgBaseUrl + item.headUrl:'/static/easy-loadimage/loading.gif'" />
                    <view class=" vote_sort">{{item.code}}</view>
                    <view class="vd_name">{{item.name}}</view>
                </view>
                <view class="vd_flex">
                    <view>{{item.voteCount}}票</view>
                    <view class="vote_btn" @click="toVote(item)">投票</view>
                </view>
            </view>
        </view>
 
    </view>
 
</scroll-view>

methods

数据请求成功后

// 赋值
this.list = res.data.itemList.map(item => {
	item.show = false
	return item
});
// 调用load方法
if (!this.show) {
	this.show = true
	setTimeout(() => {
	  this.load()
	}, 100)
 }

windowHeight

onLoad(option) {
	console.log("onLoad: ", );
	this.windowHeight = uni.getSystemInfoSync().windowHeight

},

动态加载

load() {
	uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) => {
		images.forEach((image, index) => {
			if (image.top - 325 <= this.windowHeight) {
				this.list[image.dataset.index].show = true;
			}
		})
	}).exec()

},