uniapp小程序利用transition实现吸顶效果

梁梁164

已于 2023-06-20 20:53:24 修改

阅读量1.6k

点赞数 1

文章标签： uni-app java 数学建模

于 2023-06-20 20:48:36 首次发布

本文链接：https://blog.csdn.net/qq_68153822/article/details/131314940

版权

该文描述了如何在Vue.js应用中使用scroll-view组件监听页面滚动，并通过关闭内置节流阀精确控制滚动事件。当滚动距离小于100时，导航栏淡出；否则，导航栏淡入。文章还提到了使用uni-transition组件来实现过渡动画效果，以及第三方组件zero-custom-bar和自定义组件Topbar在布局中的应用。

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

需要利用scroll-view监听页面滚动距离（注意，需要添加:throttle="false"关闭内置的节流阀）

<scroll-view class="scroll" scroll-y="true" @scroll="scrollTop" :throttle="false">
			<view class="scroll-item">
                //滚动内容
				<Showdetail :goodsdata="datalist"></Showdetail>
			</view>
		</scroll-view>

scrollTop监听页面滚动变化

scrollTop(e) {
				// console.log(e.detail.scrollTop);
				if (e.detail.scrollTop < 100) {//这里我舍得是滚动距离为100就显示
					this.isshow = false
				} else {
					this.isshow = true
				}
			},

然后利用官网的transition组件实现吸顶效果(选用淡入淡出)

(zero-custom-bar、v-tab是第三方插件库，可以去插件市场搜索。Topbar是我自己封装的一个自定义组件，可以根据手机屏幕的不同动态计算导航栏高度)

当isshow为true是导航栏就淡出，当isshow为false就淡入

<view class="top">
			<view class="" style="position: fixed;z-index: 999;">
				<zero-custom-bar title='商品详情' zeroCapsuleIconL="back" :zeroCapsule="true"></zero-custom-bar>
			</view>
			<uni-transition ref="ani" custom-class="transition" mode-class='fade' :show="isshow" duration='600'>
				<Topbar>
				</Topbar>
			</uni-transition>
			<uni-transition ref="ani" custom-class="transition" mode-class='fade' :show="isshow" duration='600'>
				<v-tabs v-model="current" :scroll="false" :tabs="tabs" @change="changeTab"></v-tabs>
			</uni-transition>
		</view>

全部代码

<view class="top">
			<view class="" style="position: fixed;z-index: 999;">
				<zero-custom-bar title='商品详情' zeroCapsuleIconL="back" :zeroCapsule="true"></zero-custom-bar>
			</view>
			<uni-transition ref="ani" custom-class="transition" mode-class='fade' :show="isshow" duration='600'>
				<Topbar>
				</Topbar>
			</uni-transition>
			<uni-transition ref="ani" custom-class="transition" mode-class='fade' :show="isshow" duration='600'>
				<v-tabs v-model="current" :scroll="false" :tabs="tabs" @change="changeTab"></v-tabs>
			</uni-transition>
		</view>
		<scroll-view class="scroll" scroll-y="true" @scroll="scrollTop" :throttle="false">
			<view class="scroll-item">
				<Showdetail :goodsdata="datalist"></Showdetail>
			</view>
		</scroll-view>

data() {
			return {
				current: 0,
				tabs: ['商品', '评价', '详情', '推荐'],
				isshow: false,//显示与隐藏
				}
		},
		methods: {
			scrollTop(e) {//监听页面滚动函数
				// console.log(e.detail.scrollTop);
				if (e.detail.scrollTop < 100) {
					this.isshow = false
				} else {
					this.isshow = true
				}
			},
		},

	}

<style scoped>
	.scroll {
		height: calc(100vh);
	}

	.top {
		z-index: 999;
		width: 100%;
		position: fixed;
	}

	.searchtop {
		position: absolute;
	}
</style>

效果