小程序滚动浮窗案例

  onPageScroll:function(e){

    var that=this;

    if (this.scrollEndTimer) {

      clearTimeout(this.scrollEndTimer);

      this.scrollEndTimer =null;

      if(that.data.img_ccc.indexOf('hide')==-1){

        console.log('set img_ccc hide');

        that.setData({'img_ccc':'am_t_left_hide'});

      }

    }

    this.scrollEndTimer = setTimeout(function () {

        console.log('滑动结束');

        that.scrollEndTimer=setTimeout(function(){

          that.setData({'img_ccc':'am_t_left'});

        },1000);

    }, 300);

  }

.am_t_left{animation:amk_t_left 0.8s ease;animation-fill-mode:forwards;}

.am_t_left_hide{animation:amk_t_left_hide 0.3s ease; animation-fill-mode:forwards;}

@-webkit-keyframes amk_t_left {

0%{

opacity: 0;

transform: translateX(100%);

}

100%{

opacity: 1;

transform: translateX(0);

}

}

@-webkit-keyframes amk_t_left_hide {

0%{

opacity: 1;

}

100%{

opacity: .5;

transform: translateX(70%);

}

}

<navigator class="img_ccc {{img_ccc}}" wx:if="{{img_ccc}}" url=""></navigator>