效果实现
1.滑动的时候调动滑动事件bindscroll="scroll"
<view style="position: fixed;z-index: 100;" wx:if="{{content.isShow}}">
我要在头部定义的标题栏
</view>
<scroll-view scroll-y="true" bindscroll="scroll" scroll-with-animation scroll-top="{{scrolltop}}">
<view>这里面是你的一大堆内容</view>
</scroll-view>
scroll-with-animation 过渡动画
scroll-top="{{scrolltop}}" 距离顶部多少高度
2.在调用scroll里面的事件函数
data: {
content: {
isShow: false
},
scrolltop:0,
}
这里使用的是获取手机屏幕大小的宽度res.screenWidth来自适应头部悬浮的位置的显示与隐藏
![](https://i-blog.csdnimg.cn/blog_migrate/4188678be982366e507e6ef81eed77ba.png)
opacity:( 1 - e.detail.scrollTop / 100 / 3).toFixed(2) 目的是为了页面上划或者下划的时候实现渐显渐隐效果,但是页面调用的时候卡动,所以就直接去除掉了这个效果.
scroll: function(e:any) {
const res = wx.getSystemInfoSync()
if(res.screenWidth <= 330){
if (e.detail.scrollTop >= 300) {
if (!this.data.content.isShow) {
this.setData({
'content.isShow': true
})
}
} else {
if(e.detail.deltaY < 0){
// console.log("向下滑动")
// opacity:( 1 - e.detail.scrollTop / 100 / 3).toFixed(2)
this.setData({scrolltop:300})
}else{
// console.log("向上滑动")
this.setData({scrolltop:0})
}
if (this.data.content.isShow) {
this.setData({
'content.isShow': false
})
}
}
}else if(res.screenWidth > 330 && res.screenWidth <= 365){
if (e.detail.scrollTop >= 330) {
if (!this.data.content.isShow) {
this.setData({
'content.isShow': true
})
}
} else {
if(e.detail.deltaY < 0){
this.setData({scrolltop:330})
}else{
this.setData({scrolltop:0})
}
if (this.data.content.isShow) {
this.setData({
'content.isShow': false
})
}
}
}else if(res.screenWidth > 365 && res.screenWidth <= 420){
if (e.detail.scrollTop >= 377) {
if (!this.data.content.isShow) {
this.setData({
'content.isShow': true
})
}
} else {
if(e.detail.deltaY < 0){
this.setData({scrolltop:377})
}else{
this.setData({scrolltop:0})
}
if (this.data.content.isShow) {
this.setData({
'content.isShow': false
})
}
}
}else{
if (e.detail.scrollTop >= 395) {
if (!this.data.content.isShow) {
this.setData({
'content.isShow': true
})
}
} else {
if(e.detail.deltaY < 0){
this.setData({scrolltop:395})
}else{
this.setData({scrolltop:0})
}
if (this.data.content.isShow) {
this.setData({
'content.isShow': false
})
}
}
}
},
![](https://i-blog.csdnimg.cn/blog_migrate/e4e91e58e793df53e253ca0e99678518.gif)