uniapp页面滚动监听

先在前面总结下，下面一共有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里有多个数据，可打印出来，根据需要使用
},