weex实现滚动监听

weex实现滚动监听

场景描述：weex页面实现一个悬浮Gif图，滑动页面向右侧隐藏，停止滑动页面Gif图再次出现。

在weex中实现滚动可以使用scroller组件来实现，具体实现如下：

<template>
<!-- 通过设置@scrollStart、@scrollend事件来监听滚动事件，可以获取到当前滚动位置等相关信息 -->
  <scroller show-scrollbar="false" class="scrollerName"  @scrollStart="scrollStart" @scrollend="scrollEnd">
    <!-- 悬浮Gif -->
    <div class="gif-content"  ref="scrollGif" v-if="gifConfig && isShowGifImg">
       <image  class="gif-imgs"  :src="gifConfig.gif_url" @click="goToGifLink"></image>         
   </div>
  </scroller>
</template>
<script>
export default {
	mounted:{
	    <!-- 监听scroll事件 -->
		window.addEventListener('scroll', this.handleScroll, true)
	},
	methods:{
	<!-- 当用户开始滚动ScrollView时，scrollStart事件会被触发并传递一个event对象参数 -->
		scrollStart(event){ 
            if(isWeb){
                 window.addEventListener('scroll', this.handleScroll, true)
            }else{
                if(this.isShowGifImg){
                     let slider = this.$refs.scrollGif;  
                     weex.requireModule('animation').transition(slider, {
                         styles: {
                             transform: 'translateX(160px)'
                         },
                         duration: 1000,
                         timingFunction: 'linear',
                         delay: 0
                     }, () => {
                        
                     })
                }                
            }
        },
       	<!-- 当用户停止滚动ScrollView时，scrollEnd事件会被触发 -->
        scrollEnd(){
            if(this.isShowGifImg){
                let slider = this.$refs.scrollGif;    
                   weex.requireModule('animation').transition(slider, {
                      styles: {
                          transform: 'translateX(0)'
                      },
                      duration: 1000,
                      timingFunction: 'linear',
                      delay:1500
                }, () => {})  
            } 
        },
        isScrollEnd() {
            t2 = document.getElementsByClassName('scrollerName')[0].scrollTop || document.body.scrollTop;
            let slider = document.getElementsByClassName("gif-content")[0];
            if(t2 == t1 && slider){
                slider.style.right = 0 
            }
        },
        <!-- 监听scroll事件 -->
        handleScroll () {
            if(this.isShowGifImg){
                let slider = document.getElementsByClassName("gif-content")[0];
                clearTimeout(timer);
                timer = setTimeout(this.isScrollEnd, 1000);
                t1 = document.getElementsByClassName('scrollerName')[0].scrollTop || document.body.scrollTop;
                if(t1>0 && slider){
                    // 控制位移大小
                    slider.style.right = '-160px';                        
                } 
            }
        },
	}
}
</script>

注：scrollStart事件要判断是否web，存在兼容性问题。