tab滑动与页面滑动

HTML

<view class="container">
        //tab顶部滑块
        <v-tabs v-model="activeTab" :scroll="true" :tabs="['tab1', 'tab2']" lineColor="white" @change="changeTab" :current7="defaultindex"></v-tabs>
        //内容区 
        <scroll-view class="content" scroll-y="true" style="height: 100%;">
            //滑块视图
            <swiper class="swiper_group" @change="tabChange" :current="defaultindex">
                //urrent:当前所在滑块tab1
                <swiper-item class="attention" :key="0">
                    <scroll-view class="swiper-item-groups" scroll-y="true" style="height: 100%;">
                        //内容
                    </scroll-view>
                </swiper-item>
                //tab2滑块区
                <swiper-item class="appointment" :key="1" style="background-color: #FFFFFF;">
                    <scroll-view class="swiper-item-groups" scroll-y="true" style="height: 100%;">
                         //内容
                    </scroll-view>
                </swiper-item>
            </swiper>
        </scroll-view>
</view>

JS

//初始定义
defaultindex: 0,  //默认让下标为1的数据选中,下标从0开始
activeTab: 0,
//tab点击
changeTab(index) {
        this.defaultindex = index
},
//页面滑动触发
tabChange(e) {
    this.defaultindex = e.detail.current;
},

 

上一篇:Hibernate基础知识


下一篇:制表符(tab 键)的概念