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

一、效果：

功能描述：监听屏幕滚动，实现向下滚动时搜索框和分类选项置顶，向上滚动页面恢复原样。

二、实现：

运用页面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;
}