uni-app根据滚动距离决定tab选项卡的类名的三目表达式

最新推荐文章于 2025-03-16 15:00:00 发布

原创最新推荐文章于 2025-03-16 15:00:00 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

uni-app 专栏收录该内容

10 篇文章

订阅专栏

这篇博客探讨了如何在移动端应用中根据页面滚动距离动态改变元素类名，以实现固定头部的效果。通过监听`onPageScroll`事件，当滚动距离超过特定阈值时，切换`showTab`变量，进而更新`end-title`类的显示状态。这种方法常用于优化用户体验，保持导航栏在滚动时始终可见。

        <view :class="[showTab?'':'endFixd','end-title']"> </view>
        //end-title  公共类
        data() {
			return {
				showTab: true
		        }
		},
      //根据滚动距离决定tab选项卡的类名
		onPageScroll(res) {
			//获取距离顶部距离
			const scrollTop = res.scrollTop;
			// 获取屏幕宽高
			const {
				windowWidth,
				windowHeight,
				statusBarHeight
			} = uni.getSystemInfoSync();
			if (scrollTop > 0) {
				if (scrollTop >= 50) {
					this.showTab = false
				}else if(scrollTop <= 50){
				    this.showTab = true
			    }
			}
		},