微信小程序吸顶实现卡顿的问题怎么办，如何处理好-群英

上一篇：CSS中怎么样实现各种稀奇古怪的背景效果下一篇：-webkit-box-reflect属性能够实现什么效果，用法是怎样的

今天这篇给大家分享的知识是“微信小程序吸顶实现卡顿的问题怎么办，如何处理好”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“微信小程序吸顶实现卡顿的问题怎么办，如何处理好”文章能帮助大家解决问题。

最近一个项目甲方一定要两个tab菜单吸顶，在网上找了好久没找到满意的，然后在一个博客中发现可以用position:sticky解决，因为之前没见过这个属性，然后搜了下，了解了用法，写了个小demo，发现挺好用的，完美解决不卡顿。

html：

<template>
	<view class="">
		<view class="">
			<view class="box">
				
			</view>
			<view class="tabbar t1">
				tabbar
			</view>
			<view class="box">
				
			</view>
			<view class="tabbar t2">
				tabbar
			</view>
			<view class="item" v-for="(item,index) in 20" :key='index' >
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
</script>

css：

<style>
	.box{
		height: 30vh;
		border: 1px solid #007AFF;
	}
	.tabbar{
		background: #fff;
		position: -webkit-sticky;
		position: sticky;
		background: #4CD964;
		height: 50upx;
		
	}
	.t1{
		top: -1upx;
	}
	.t2{
		top: 50upx;
	}
	.item{
		height: 100upx;
		margin-bottom: 20upx;
		background: #007AFF;
	}
</style>

主要是
position: -webkit-sticky; position: sticky;
还要加个top值，离顶部多少距离吸顶

以上就是关于“微信小程序吸顶实现卡顿的问题怎么办，如何处理好”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。