uni-app带滑动条的导航栏

超、凢脫俗 2022-11-10 03:46 230阅读 0赞

先放实现效果图：

> ![实现效果图][20210316110547509.gif_pic_center]

结构：

<scroll-view scroll-x class="nav-tab-wrap" :throttle="false" @scroll="scrollEvent">
    	<view class="nav-tab">
    		<block v-for="(item,index) in tabList">
    			<view class="nav-tab-item" :class="{ 'active':currentIndex==index}" @tap="changeTab(index)">{
       {item}}</view>
    		</block>
    		<view class="underline" :style="'left:'+ left +'px;width:'+ width +'px;'"></view>
    	</view>
    </scroll-view>

样式：

<style lang="less"> .nav-tab-wrap{ 
    		margin-top: 200rpx;
    		width: 100%;
    		white-space: nowrap; .nav-tab{ 
    			position: relative; .nav-tab-item{ 
    				margin-right: 60rpx;
    				line-height: 80rpx;
    				display: inline-block;
    				color: #333333;
    				font-weight: bold;
    				font-size: 30rpx; &:nth-of-type(1){ 
    					margin-left: 60rpx;
    				}
    				&.active{ 
    					color: #FF6100;![在这里插入图片描述](https://img-blog.csdnimg.cn/20210316110536246.gif)
    
    				}
    			}
    			.underline{ 
    				position: absolute;
    				width: 40rpx;
    				height: 5rpx;
    				background-color: #FF6100;
    				left: 20rpx;
    				bottom: 0;
    				transition: 0.4s;
    			}
    		}
    	}
    </style>

逻辑：

<script>
    	export default { 
    		data() { 
    			return { 
    				currentIndex:0, //当前选中的索引值
    				tabList:["全部分类","分类1","分类2","分类3","分类4","分类5","分类6"],
    				left:uni.upx2px(20), //滑动条左边距离
    				width: uni.upx2px(40), //滑动条宽度
    				scrollX:0, //滚动条的位置
    				space:uni.upx2px(20),//滑动条和item的左右间距
    			}
    		},
    		mounted() { 
    			let that = this;
    			that.changeTab(0);
    		},
    		methods: { 
    			changeTab(num){ 
    				let that = this;
    				that.currentIndex = num;
    				let selectorQuery = uni.createSelectorQuery().in(that);
    				selectorQuery.selectAll('.nav-tab-item').boundingClientRect(function(data) { 
    					// data 为当前选中tab的节点信息
    					that.left = data[num].left + that.scrollX + that.space;
    					that.width = data[num].width - that.space*2;
    				}).exec();
    			},
    			scrollEvent(e){ 
    				this.scrollX = e.detail.scrollLeft;
    			}
    		}
    	}
    </script>

经过在微信小程序、H5以及APP端多次测试，发现如果滚动过快，`scroll`事件获取到的`scrollLeft`不准，导致滑动条的位置也不准。  
经过查询发现`scroll-view`标签自带节流，在标签内添加属性`:throttle="false"`可以关闭官方默认节流，但是测试后发现只在微信小程序管用。  
H5和APP端暂时没有找到解决方法。

[20210316110547509.gif_pic_center]: /images/20221023/75ea0658cb454f658e8701e617e432ad.png

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5 导航栏左后滑动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

素颜马尾好姑娘i/ 2023年03月14日 13:20/ 0 赞/ 6 阅读

相关滑动导航栏效果 html+css+js

一.先看效果（完整代码在最后）： ![在这里插入图片描述][20210501193422872.gif_pic_center] 实现并不难，但是初学 js 时拿来练手

超、凢脫俗/ 2023年01月18日 06:47/ 0 赞/ 163 阅读

相关 Android 带Lottie动画的导航栏

1. 什么是Lottie动画 Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe Afte

小灰灰/ 2022年12月07日 12:13/ 0 赞/ 226 阅读

相关 uni-app带滑动条的导航栏

先放实现效果图： > ![实现效果图][20210316110547509.gif_pic_center] 结构： <scroll-view scroll-x c

超、凢脫俗/ 2022年11月10日 03:46/ 0 赞/ 231 阅读

相关 uniapp封装了个简单的导航栏

没有做的很华丽，业务正好有需要 ![在这里插入图片描述][20210617211039754.png_pic_center] ![在这里插入图片描述][20210617

电玩女神/ 2022年10月07日 10:59/ 0 赞/ 188 阅读

相关让具有导航栏的界面滑动返回

遵守协议 <UIGestureRecognizerDelegate> 在viewdidload中实现以下方法 id target = self.navig

不念不忘少年蓝@/ 2022年08月20日 02:30/ 0 赞/ 196 阅读

相关 jquery 实现导航栏滑动效果

原文：[http://www.cnblogs.com/WebMobile/p/3926921.html][http_www.cnblogs.com_WebMobile_p_39

向右看齐/ 2022年08月11日 06:28/ 0 赞/ 278 阅读

相关 uniapp 任务栏顶部导航适配

uniapp 任务栏顶部导航适配一、问题说明： 1、问题：手机型号不一样头部导航显示样式和高度都不一样，例如：刘海屏、挖孔屏 2、解决思路：

ゝ一世哀愁。/ 2021年09月18日 06:12/ 0 赞/ 582 阅读

相关 uniapp如何动态修改导航栏标题

在开发中我们往往会遇到一个页面有好多种支付状态的 , 这个时候头部的标题也要跟着动态变化的 , 一段代码搞定. 只需要这个段代码就可以搞定 uni.setNavig

朴灿烈づ我的快乐病毒、/ 2021年07月25日 13:09/ 0 赞/ 830 阅读

相关 uniapp 导航栏tabBar

注意: (1)当设置导航栏在顶部,即position为top时,只能配置文字,不能配置图标 (2)当设置导航栏在顶部时,仅微信有效 (3)图标不

超、凢脫俗/ 2021年07月24日 23:15/ 0 赞/ 791 阅读