uni-app微信小程序页面滑动,副标题固定到顶部
页面上滑副标题到达顶部后,标题锁定在顶部
1、首先加载时通过uni.createSelectorQuery的方法获取需要被锁定在顶部样式距离顶部的距离
onLoad() {
uni.createSelectorQuery().select('.box').boundingClientRect(res=>{
this.myScroll =res.top;
}).exec();
},
2、利用页面滚动的onPageScroll函数获取页面滑动的距离
onPageScroll(e) {
console.log(e.scrollTop)
}
3、当滑动的距离大于(锁定框)初始化时距离顶部的高度时,修改样式为“position: fixed;”固定定位样式
onPageScroll(e) {
if(e.scrollTop > this.myScroll){
this.temp= 1
}else{
this.temp= 0
}
}
4、(个人处理方式可忽略)为了防止样式变化后页面闪动,加一个和头部相同样式用于缓冲。
<view v-if="temp==1" class="box">用于缓冲 fixed 导致的瞬间闪动</view>
这里是使用微信自带的title样式,如果是自动定义的title就需要对自定义的title的高度进行相应的计算就可以了,然后动态设置锁定的top。相关的计算这里就不做过多的赘述了。
完整相关代码
<template>
<view>
<view class="list" v-for="(item,index) in listDataA">
<view class="list-item" :style="index == listDataA.length-1 ?'margin: 20rpx' : ''">{{item.name}}</view>
</view>
<view class="box" :class="temp==1?'boxStyle':''">上拉顶部固定 Title</view>
<view v-if="temp==1" class="box">用于缓冲 fixed 导致的瞬间闪动</view>
<view class="list" v-for="(item,index) in listDataB">
<view class="list-item" :style="index == listDataB.length-1 ?'margin: 20rpx' : ''">{{item.name}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
temp:0,
myScroll:0,
listDataA: [],
listDataB: []
}
},
created() {
for (let i = 0; i < 3; i++) {
this.listDataA.push({ id: i+1, name: '测试数据A - ' + (i + 1) })
}
for (let j = 0; j < 10; j++) {
this.listDataB.push({ id: j+1, name: '测试数据B - ' + (j + 1) })
}
},
onLoad(){
uni.createSelectorQuery().select('.box').boundingClientRect(res=>{
this.myScroll =res.top;
}).exec();
},
onPageScroll(e){
if(e.scrollTop > this.myScroll){
this.temp= 1
}else{
this.temp= 0
}
}
}
</script>
<style>
.box{
height: 100rpx;
width: 100wv;
text-align: left;
line-height: 100rpx;
background: #f7fbff;
padding-left: 25rpx;
}
.boxStyle{
position: fixed;
top: 0;
left: 0;
height: 100rpx;
width: 100%;
text-align: left;
line-height: 100rpx;
background: #f7fbff;
padding-left: 25rpx;
}
.list{
width: 100%;
background: #eee;
display: flex;
}
.list-item{
margin: 20rpx 20rpx 0 20rpx;
width: 100%;
height: 200rpx;
background: #FFF;
padding: 10rpx;
border-radius: 10rpx;
}
</style>
以上为个人工作过程中的使用及记录,如对您有所帮助不胜荣幸。