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="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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值