美文网首页Weex开发技巧weex社区Web前端之路
【weex填坑之路-03】关于Web前端开发,<scrol

【weex填坑之路-03】关于Web前端开发,<scrol

作者: Jerryli_720 | 来源:发表于2017-11-19 12:32 被阅读57次

    问题背景

    在web端开发中,我们有时候需要监听页面的滑动事件,在官方文档中有提到,<scrolller/>标签中存在一个scroll事件

    scroll: 列表发生滚动时将会触发该事件,事件的默认抽样率为10px,即列表每滚动10px触发一次,可通过属性offset-accuracy设置抽样率。参见 scroll event demo

    在Android/iOS端中是可以成功触发scroll事件的,可是在web端中并不会触发。

    解决方法

    由于是在在浏览器中运行,所以我们可以触发浏览器window的scroll事件,以此代替<scroller/>的scroll事件,其中的offsetX和offsetY可以通过dom的getComponentRect(ref, callback) 来计算各个标签的布局信息,格式参考如下

    {
        result: true,
        size: {
            bottom: 60,
            height: 15,
            left: 0,
            right: 353,
            top: 45,
            width: 353
        }
    }
    
    
    <script>
        const dom = weex.requireModule("dom");//用于计算所需标签
    
        export default {
            created() {
                window.addEventListener("scroll", this.onscroll);//把window的scroll事件传递给onscroll()
            },
            methods: {
                onscroll() {
                    const element = this.$refs.yourElement;//你的element
                    const result = dom.getComponentRect(element, option => {
                        console.log("getComponentRect:", option.size);
                    });
                },
            }
        };
    </script>
    

    这样我们就可以得到滑动事件。

    相关文章

      网友评论

        本文标题:【weex填坑之路-03】关于Web前端开发,<scrol

        本文链接:https://www.haomeiwen.com/subject/hxvuvxtx.html