微信小程序-监听屏幕滚动

实现：

运用页面Page()函数中的onPageScroll方法，来监听屏幕滚动的距离。

1）.js中：

data:{
  scrollTop:0,
},
 
//监听屏幕滚动 判断上下滚动
  onPageScroll: function (ev) {
    this.setData({
      scrollTop: ev.scrollTop
    })
  },

2）.wxml页面中：

• hidden属性来控制局部的显示与隐藏 
• 三元操作符
• 顶部固定

    <!--轮播图-->
    <view class="container-top" hidden="{{scrollTop>178?true:false}}">
     ........
    </view>
    <!--搜索-->
    <view class="collect-top {{scrollTop>178?'addClass':''}}">
     ......
    </view>

  /*搜索框置顶**/
  .addClass{
    position:fixed;
    top:0px;
  }