uniapp u-tabs-swiper的使用
<view class="page-content"><view><u-tabs-swiper ref="tabs" :list="tabsList" :current="current" :is-scroll="false" bar-height="6" bar-width="40" active-color="#2979ff" @change="tabsChang
·
<view class="page-content">
<view>
<u-tabs-swiper ref="tabs" :list="tabsList" :current="current" :is-scroll="false" bar-height="6" bar-width="40" active-color="#2979ff" @change="tabsChange" ></u-tabs-swiper>
</view>
<swiper class="swiper-group" :style="{height:swiperContentHeight}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
<scroll-view class="scroll-content-container" :style="{height:scrollerHeight}" scroll-y @scrolltolower="onreachBottom">
<block v-for="(items, indexs) in item.dataSet" :key="indexs">
<view class="data-item">{{items}}</view>
</block>
</scroll-view>
</swiper-item>
</swiper>
</view>
tabsList: [{
name: '菜单1'
}, {
name: '菜单2'
}, {
name: '菜单3'
}],
current: 0,
swiperCurrent: 0,
scrollerHeight: 0,
swiperContentHeight: 0,
tabs:[
{name:'菜单1',index:0,dataSet:[11,22,33,44,55]},
{name:'菜单2',index:1,dataSet:[111,222,333,444,555]},
{name:'菜单3',index:2,dataSet:[1111,2222,3333,4444,5555]}
]
//第一次加载
onLoad(e) {
console.log('打印参数:',this.current)
this.swiperCurrent = e.type
this.current = e.type
},
onReady() {
let that = this
uni.getSystemInfo({
success: function (res) {
let windowHeight= res.windowHeight;
that.swiperContentHeight = (windowHeight-158) + 'px';
that.scrollerHeight = (windowHeight-158-5) + 'px'; // 给5px的底部间距
}
});
},
//页面显示
onShow() {
},
methods: {
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
},
// swiper-item左右移动,通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx;
this.$refs.tabs.setDx(dx);
},
// 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
// swiper滑动结束,分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.$refs.tabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
// scroll-view到底部加载更多
onreachBottom() {
}
<style lang="scss" scoped>
page {
width: 100%;
min-height: 100%;
display: flex;
}
#app {
flex: 1;
display: flex;
flex-direction: column;
}
.search-bar {
padding: 30rpx 30rpx 30rpx;
}
.page-content {
flex: 1;
display: flex;
flex-direction: column;
}
.swiper-group {
}
.scroll-content-container {
}
.data-item {
height: 200rpx;
border: 1rpx solid #000;
margin: 10rpx;
}
</style>
更多推荐
已为社区贡献45条内容
所有评论(0)