uniapp h5 图片懒加载

原创

已于 2023-12-07 15:51:39 修改 · 1k 阅读

标签

#uni-app #前端 #vue.js

收录于

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

本文讲述了在Vue项目中，onPageScroll生命周期函数失效的问题，作者提供了使用scroll-view的onScroll事件作为替代方法，并详细展示了如何实现数据请求后的懒加载功能。

参考博文

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(ite