uni-app微信小程序页面滑动，副标题固定到顶部

Pekah_zx

已于 2023-12-06 15:54:50 修改

阅读量1.2k

点赞数 1

文章标签： uni-app 微信小程序小程序

于 2023-12-06 15:38:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_31629679/article/details/134832099

版权

本文描述了如何在uni-app开发的微信小程序中，通过监听页面滑动事件，使副标题在上滑至顶部时锁定并保持在视口上方。使用uni.createSelectorQuery获取初始位置，当滑动超过该位置时应用fixed定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

以上为个人工作过程中的使用及记录，如对您有所帮助不胜荣幸。