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; },