直接粘贴复制就可使用
index.wxml文件
<view class='header' style="opacity:{{opacityStyle}};height:{{height}}px;z-index:100;" hidden='{{hiddenModel}}'></view>
index.wxss文件
.header{
position: fixed;
width: 100%;
/* z-index: 10000; */
top: 0;
left: 0;
background: #1CAE74;
/* height: 180rpx; */
}
index.js文件
Page({
/**
* 页面的初始数据
*/
data: {
height:0,
hiddenModel:true,
opacityStyle: 0,
scrollTop: 0,
},
onLoad: function (options) {
if(app.globalData.height < 44){
this.setData({
height:app.globalData.height * 2 + 20
})
this.setData({
lineHieght:(app.globalData.height * 2)+44
})
}else{
this.setData({
height:app.globalData.height * 2
})
this.setData({
lineHieght:(app.globalData.height * 2)+44
})
}
},
//监听头部滚动条
onPageScroll: function (ev) {
// console.log(ev,1111)
var _this = this;
if (ev.scrollTop > 50) {
let opacity = ev.scrollTop / 120
opacity = opacity > 1 ? 1 : opacity
_this.setData({
hiddenModel: false,
opacityStyle: opacity
})
} else {
_this.setData({
hiddenModel: true
})
}
},