tabs 标签

功能描述

该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。

用到的参数

list:				标签数组，元素为对象，如[{name: '推荐'}]
is-scroll:			tabs是否可以左右拖动
current:			指定哪个tab为激活状态
@change:			点击标签时触发
bg-color:			tabs导航栏的背景颜色
active-color:		滑块和激活tab文字的颜色
inactive-color:		tabs文字颜色
height:				导航栏的高度，单位rpx
font-size:			tab文字大小，单位rpx
bar-width:			滑块宽度，单位rpx
bar-height:			滑块高度，单位rpx
bar-style:			底部滑块的样式，对象形式Object

<u-tabs
	:list="navBarList" 
	:is-scroll="true" 
	:current="navBarCurrent" 
	@change="navBarChange" 
	bg-color="" 
	active-color="#26A69A" 
	inactive-color="#505660"
	height="50"
	font-size="28"
	bar-width="54"
	bar-height="4"
	:bar-style="{
	  borderRadius: '2rpx',
	  background: 'linear-gradient(270deg, #26A69A 0%, #4DB6AC 100%)',
	  bottom:'-4rpx'
}"></u-tabs>

data(){
	return{
		navBarList: [
			{name:'推荐'},
			{name:'女装'},
			{name:'百货'},
			{name:'母婴'},
			{name:'手机'},
		], //商品分类
		navBarCurrent: 0,
	}
}
methods:{
	// 商品分类切换
	navBarChange(index) {
		this.navBarCurrent = index;
	},
}

效果下图