uview+uniapp 的H5

uniapp使用uview时tabs组件不能平均分布

<template>
	<view class="home">
		<view class="tabs">
			<u-tabs :list="list" @click="click"></u-tabs>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Tabs",
		data() {
			return {
				list: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}，{
					name: '其他'
				}]
			}
		},
		methods: {
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss">
	page {
		font-size: 24rpx;
		font-family: sans-serif;
	}

	.home {
		background-color: #fff;
	}

	.tabs {
		width: 690rpx;
		margin: 0 auto;
	}

	// 平均分布
	::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: space-between;
	}

	//选中滑块对应
	::v-deep .u-tabs__wrapper__nav__item {
		flex: 1 1 0% !important;
	}
</style>

不超过6个分类时使用该样式

超过6个时使用uview框架基础tabs即可