1.基础配置依赖,参考uview官网
2.附源码(如果想让选项平均分布,把:is-scroll改成false)
<view class="wrap">
<view class="u-tabs-box">
<u-tabs-swiper activeColor="#ffffff" :bold="false" inactive-color="#ffffff" ref="tabs" :list="list"
:current="current" @change="change" :is-scroll="false" swiperWidth="750" bg-color='#2E95FF'>
</u-tabs-swiper>
</view>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
@animationfinish="animationfinish">
<swiper-item>
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
选项卡内容1
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
选项卡内容2
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
选项卡内容3
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
<script>
export default {
data() {
return {
list: [{
name: '配电图'
},
{
name: '最大容量'
},
{
name: '电力参数'
}
],
current: 0,
swiperCurrent: 0,
tabsHeight: 0,
dx: 0,
}
},
methods: {
// tab栏切换
change(index) {
this.swiperCurrent = index;
},
transition({
detail: {
dx
}
}) {
this.$refs.tabs.setDx(dx);
},
animationfinish({
detail: {
current
}
}) {
this.$refs.tabs.setFinishCurrent(current);
}
},
// http配置请求
onLoad(option) {
//根据选项卡状态跳转对应下标
this.current = option.type
this.swiperCurrent = option.type
}
}
</script>
<style>
/* #ifndef H5 */
page {
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
/* #endif */
.u-tabs-box {
background-color: #2E95FF;
}
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top));
width: 100%;
}
.swiper-box {
flex: 1;
}
.page-box {
/* height: 100%; */
width: 90%;
margin-left: 5%;
}
</style>