uniapp自定义滚动标签栏tab

目录

新建组件

 配置组件

编写css样式

---

本文主要介绍如何在uniapp里自定义一个向vant组件库里的  标签栏滚动   ←点击查看

新建组件

首先在component文件夹里新建组件同名文件夹和组件

 配置组件

通过uni自带的scroll-view标签，用v-for展示数据（数据自己编一组就行）

标签属性说明看这里  ←点击查看 

<template>
	<view>
		<scroll-view scroll-x="true" class="scroll-view" :scroll-into-view="toview">
			<view v-for="(item,index) in topBarList" class="scroll-item" :id="'item'+index" :class="{active:index===activeindex}" @click="toggleclass(index)"  >
					<text>{{item.name}}</text>
			</view>
		</scroll-view>
	</view>
</template>

此处注意，scroll-into-view属性需要动态绑定且指向的是标签的id值

所以要在methods里配置相应的方法，回了保证点击到页面头和尾是均可以自动前移/后移而不需要手动前后拖拽，用于控制展示的toview属性（属性名自己定）最好设置为前一个标签

toggleclass(index){
				this.activeindex=index;
				this.toview='item'+(index-1)
				this.$router
			},

编写css样式

设置inline-block和nowrap来避免换行

.scroll-view{
	height: 88rpx;
	width: 100%;
	line-height: 88rpx;
	white-space: nowrap;
}
.scroll-item{
	display: inline-block;
	padding: 0 30rpx;
}

完工，在想要使用的地方直接使用自定义组件标签即可