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