uniapp： 实现一个优美的带底部标识的横向滚动导航栏_uniapp横向滚动导航条

效果如图：

 图为一个列表由后台自定义的导航栏，当数量超过8个时进行分页，横向滚动预览其它导航栏，滑动后底部条也会随之变化

代码：

1.首先是nav数组的处理

// menu为接口返回的菜单数组
let menuArr = [];
// 处理nav为每8个一组
if (menu.length) {
let [start, end, result] = [null, null, []]
for (let i = 0; i < Math.ceil(menu.length / 8); i++) {
     start = i * 8
	 end = start + 8
	 result.push(menu.slice(start, end))
}
menuArr = result;
this.menus=menuArr;
}

2.HTML

<!-- nav列表 START -->
<scroll-view class="home-index__nav" v-if="menus.length" scroll-x="true" @scroll="scrollNav">
	<view :class="['home-index__nav-item']" v-for="(item,index) in menus">
		<view class="home-index__nav-list" v-for="(nav,key) in item" :key="key"
			@click="goMenuDetail(nav)">
			<img class="home-index__nav-logo" :src='nav.pic'>
			<view class="home-index__nav-title area-row">{{nav.name}}</view>
		</view>
	</view>
</scroll-view>
<view style="height:6px;margin-top:-14rpx;" class="mb">
	<view class="home-index__nav-scroll" :style="`width:${36*menus.length}rpx`"
		v-if="menus.length >= 2"><text :style="`left:${scrollNavIndex*36}rpx`"></text></view>
</view>
<!-- nav列表 END -->

 3.js事件

// 导航栏滚动条
scrollNav(event) {
	const {
		scrollWidth,
		scrollLeft
	} = event.detail;
	const oneWidth = scrollWidth / this.menu
	let index = 0;
	for (let i = 0; i < this.menus.length; i
		if (scrollLeft >= (oneWidth * i)) {
			index = i;
		}
	}
	if (index === this.scrollNavIndex) retur
	this.scrollNavIndex = index;
},

 4.css样式

.home-index__nav {
	white-space: nowrap;
	max-height: 336rpx;
	padding: 24rpx 0;
	margin: 0 24rpx;
}
.home-index__nav-item {
	display: inline-flex;
	width: 100%;
	height: 100%;
	flex-wrap: wrap;
	margin-top: 0;
}
.home-index__nav-title {
	font-size: 24rpx;
	color: #454545;
	margin-top: 6rpx;
}
.home-index__nav-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(calc(100% - 48rpx)/4);
	margin-top: 30rpx;
	&:nth-child(-n+4) {
		margin-top: 0;
	}
	image {
		width: 82rpx;
		height: 82rpx;
	}
}
.home-index__nav-scroll {
	position: relative;
	// width: 100rpx;
	height: 12rpx;
	background: #E4E4E4;
	border-radius: 10px;
	margin: 0rpx auto 20rpx auto;
}
.home-index__nav-scroll text {
	position: absolute;
	width: 36rpx;
	height: 12rpx;
	background: #CBAA65;
	border-radius: 10px;
	display: inline-block;
}