wxml:
<view hidden="{{hide}}" class="fixhead" >头部固定</view>
<view class='demo1'>滑动1</view>
<view class='demo2'>滑动2</view>
wxss:
.demo1,.demo2{
height: 300px;
margin-top: 100rpx;
}
.fixhead{
position: fixed;
top: 0;
height: 50rpx;
width: 100%;
text-align: center;
background-color: red;
}
js:
onLoad: function(options) {
},
//监听屏幕滚动 判断上下滚动
onPageScroll: function (ev) {
var _this = this;
//当滚动的top值最大或者最小时，为什么要做这一步是由于在手机实测小程序的时候会发生滚动条回弹，所以为了解决回弹，设置默认最大最小值
if (ev.scrollTop <= 0) {
ev.scrollTop = 0;
} else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
ev.scrollTop = wx.getSystemInfoSync().windowHeight;
}
//判断浏览器滚动条上下滚动
if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
this.setData({
hide: true
})
console.log('向下滚动');
} else {
console.log('向上滚动');
this.setData({
hide: false
})
}
//给scrollTop重新赋值
setTimeout(function () {
_this.setData({
scrollTop: ev.scrollTop
})
}, 0)
},
})