uniapp小程序利用transition实现吸顶效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp小程序利用transition实现吸顶效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需要利用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>

效果

uniapp 滚动吸顶,uni-app,java,数学建模