实现：

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