效果展示
滑动切换
1.页面部分
<view>
<scroll-view scroll-x="true" class="scroll-view_H" :scroll-into-view="scrollinto"
style="background-image: linear-gradient(to bottom right, #2683cf, skyblue);padding: 10rpx 0;">
<view v-for="(item,index) in tabBars.list" :key="index" @click="changeIndex(index)" :id="'tab'+index">
<view :class="{active:currentIndex===index}">
{{item.name}}
</view>
</view>
</scroll-view>
<swiper :style="'height:'+scrollH+'px'" :current="currentIndex" @change="changeTab">
<swiper-item>
<view class="swiper-item">
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">
12312
</scroll-view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">
21331232
</scroll-view>
</view>
</swiper-item>
</swiper>
</view>
2.js部分
data() {
return {
scrollinto: '',
scrollH: '', //动态获取高度
currentIndex: 0,
tabBars: {
list: [{
id: 1,
name: '首页'
},
{
id: 2,
name: '我的'
}
]
},
}
},
mounted() {
//动态获取高度
uni.getSystemInfo({
success: (e) => {
this.scrollH = e.windowHeight - uni.upx2px(88)
}
})
},
methods: {
//点击导航切换变色
changeIndex(index) {
if (this.currentIndex == index) return
this.currentIndex = index
this.scrollinto = 'tab' + index
},
changeTab(e) { //这是swipe中current变换后触发
this.currentIndex = e.detail.current
},
}
3.css部分
.scroll-view_H {
white-space: nowrap;
height: 88rpx;
line-height: 74rpx;
}
.scroll-view_H view {
width: 50%;
text-align: center;
display: inline-block;
}
.active {
color: #fff;
border-bottom: 4rpx solid #fff;
}