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即可