先在前面总结下，下面一共有3种监听滚动的方法。

昨天在做uniapp的图片懒加载，从网上找了个插件，导入到HBuilderX后，捣鼓了一晚上，总算是正常跑起来了。

今天早上，把代码copy到项目上，结果只有第一屏的图片能展示，滑动后，下面的图片都不显示了！-_-!

因为有了昨晚的经验，很快就定位到问题是滚动监听出现了问题。

这个插件的图片懒加载一个关键的地方就是用到滚动监听。

第一种

在普通页面可以用生命周期的“onPageScroll”方法，如下：

onPageScroll(e) { // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 this.scrollTop = e.scrollTop; },

（这里说下，找到的插件里用的是“Scroll”这个方法，不过据说被过滤了，用不了）

第二种

因为项目中，图片是在子组件里的，“onPageScroll”方法在这也不好使了！！好在找到了另外一个方法：子组件和父组件绑定、通信。

//主页面正常使用这个生命周期的方法 onPageScroll(res) { uni.$emit('onPageScroll', res.scrollTop);//传递参数 }, //子组件使用“mounted”这个生命周期方法 mounted() { var that = this; uni.$on('onPageScroll', function(data) {//接收参数 console.log(data); that.scrollTop = data; }); },

本以为到这就可以解决问题了，但是，上面这种方法监听的滚动是页面的，所以如果内容是在“scroll-view”这个组件里面，结果就是：这种方法也失效！

第三种

后面，只能使用“scroll-view”这个组件的@scroll属性了。

//组件中设置这个属性 <scroll-view scroll-y class="page" @scroll="scroll"> //export default的methods里面定义scroll方法，接收数据 scroll(event) { // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 this.scrollTop = event.detail.scrollTop;//这里的detail里有多个数据，可打印出来，根据需要使用 },

好了，经过测试，这第三种方法总算是满足我的需求了！！：）

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。