美文网首页
关于H5 vue滚动事件监听 及 商品曝光

关于H5 vue滚动事件监听 及 商品曝光

作者: w龙 | 来源:发表于2019-09-26 09:34 被阅读0次

监听页面的滚动事件

 mounted() {
            this.$nextTick(() => {
                window.addEventListener("scroll", this.handleScroll);
            })

        }

获取页面的滚动高度

 this.$nextTick(() => {
       let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
})

获取商品的offsetTop

 this.$nextTick(() => {
             let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                    if (this.$refs.goodsItem) {
                        let offsetTop = this.$refs.goodsItem.offsetTop
                        if (offsetTop - scrollTop < 880 && offsetTop - scrollTop > 400 && !this.arrList.includes(this.goodsObj.defaultId)) {
                            this.arrList.push(this.goodsObj.defaultId)
                           // 商品曝光事件
                      }
           }
    })                    

相关文章

网友评论

      本文标题:关于H5 vue滚动事件监听 及 商品曝光

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