需求:页面往上滚动,当红框内容位置滚动到页面顶部时,固定到顶部;反过来,页面往下滚动,当页面滚动高度小于红框内容距离顶部正常高度时(未固定到顶部),则脱离顶部固定。
实现:
//js
onPageScroll: function (e) {
if(e.scrollTop >= this.data.tabScrollTop + 10){
this.setData({
tabFixed: true
})
} else {
this.setData({
tabFixed: false
})
}
}
//wxml
<view class="tab-info {{tabFixed ? 'fixed':''}}">
<view class="title">
<text>动 态</text>
<text>订 单</text>
</view>
<view class="hidden-box"></view>
</view>
//wxss
.tab-info > .title {
display: flex;
justify-content: space-around;
height: 86rpx;
padding: 0 84rpx;
border-bottom: 2rpx solid #e6e6e6;
background-color: #fff;
}
.tab-info.fixed > .title{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 9;
}
.tab-info .hidden-box{
height: 0;
}
.tab-info.fixed .hidden-box{
height: 88rpx;
}
或者
.tab-info .hidden-box{
height: 88rpx;
display: none;
}
.tab-info.fixed .hidden-box{
display: block;
}
或者
//js
onPageScroll: function (e) {
if(e.scrollTop >= this.data.tabScrollTop + 10){
this.setData({
tabFixed: true
})
} else {
this.setData({
tabFixed: false
})
}
}
//wxml
<view class="tab-info {{tabFixed ? 'fixed':''}}">
<view class="title">
<text>动 态</text>
<text>订 单</text>
</view>
</view>
<view class="content {{tabFixed ? 'marT88':''}}"></view>
//wxss
.tab-info > .title {
display: flex;
justify-content: space-around;
height: 86rpx;
padding: 0 84rpx;
border-bottom: 2rpx solid #e6e6e6;
background-color: #fff;
}
.tab-info.fixed > .title{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 9;
}
.content.marT88{
margin-top: 88rpx;
}
或者
.content.marT88{
padding-top: 88rpx;
}
结果:当title内容部分高度 + content内容部分高度 接近屏幕本身高度时, 在安卓手机上没有问题,可以完美实现。但是,在iphone手机上会出现闪烁问题。
原因:iphone手机浏览器滚动到底部/顶部时,有一个默认的动画效果。再加上,固定顶部会引起页面的回流。
解决:页面一进入,就把title部分直接脱离文档流,这样就不会因为固定顶部而使得页面的回流问题。这个,在页面性能优化上很重要。如果后期因为用户行为要对某个元素进行动画或脱离文档流的操作,那么,在页面第一次渲染时就尽量让其脱离文档流。这样,后期的用户行为就不会引起页面的回流现象,从而影响页面的显示,而导致性能上和体验上的问题。
//js
onPageScroll: function (e) {
if(e.scrollTop >= this.data.tabScrollTop + 10){
this.setData({
tabFixed: true
})
} else {
this.setData({
tabFixed: false
})
}
}
//wxml
<view class="tab-info {{tabFixed ? 'fixed':''}}">
<view class="title">
<text>动 态</text>
<text>订 单</text>
</view>
<view class="hidden-box"></view>
</view>
//wxss
.tab-info > .title {
display: flex;
justify-content: space-around;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 9;
height: 86rpx;
padding: 0 84rpx;
border-bottom: 2rpx solid #e6e6e6;
background-color: #fff;
}
.tab-info.fixed > .title{
position: fixed;
}
.tab-info .hidden-box{
height: 88rpx;
}