微信小程序之Tab切换

wxml:

<view>

<view class='swiper-tab'>

<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">1</view>

<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">2</view>

<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">3</view>

<view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">4</view>

</view>

<swiper class='swiper' current='{{currentTab}}' duration="300" bindchange="bindchange">

<view >

<swiper-item>

<scroll-view scroll-y="true">

<view class='gaodu'>第一页</view>

<view class='gaodu'>第一页</view>

<view class='gaodu'>第一页</view>

<view class='gaodu'>第一页</view>

<view class='gaodu'>显示</view>

</scroll-view>

</swiper-item>

</view>

<swiper-item>

<scroll-view scroll-y="true">

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

<view class='gaodu'>第二页</view>

</scroll-view>

</swiper-item>

<swiper-item>

<scroll-view scroll-y="true">

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

<view class='gaodu'>第三页</view>

</scroll-view>

</swiper-item>

<swiper-item>

<scroll-view scroll-y="true">

<view class='gaodu'>第四页</view>

<view class='gaodu'>第四页</view>

<view class='gaodu'>第四页</view>

<view class='gaodu'>第四页</view>

<view class='gaodu'>第四页</view>

<view class='gaodu'>第四页</view>

<view class='gaodu'>第四页</view>

<view class='gaodu'>1第四页</view>

<view class='gaodu'>0</view>

</scroll-view>

</swiper-item>

</swiper>

</view>

wxss:

.swiper-tab{

display: flex;

height: 80rpx;

line-height: 80rpx;

width: 100%;

position:fixed;

top:0;

z-index: 100;

background: #fff;

}

.swiper-tab-item{

flex: 1;

text-align: center;

border-bottom: 1rpx solid #eee;

}

.active{

color: blue;

position: relative;

}

.swiper-tab-item.active:after{

content: "";

display: block;

height: 6rpx;

width: 60rpx;

background: #4675F9;

position: absolute;

bottom: 0;

left: 65rpx;

border-radius: 16rpx;

}

.swiper{

width: 100%;

height: 100%;

display: flex;

position: fixed;

top:80rpx;

}

scroll-view{

width: 100%;

height: 93%;/*动态高度*/

}

.gaodu{

height: 100rpx;

background: rgb(196, 248, 255);

text-align: center;

line-height: 100rpx;

border-bottom: 1rpx solid #4675F9;

}

js:

Page({

data: {

currentTab: 0 //预定的位置

},

//点击滑动

bindchange: function (e) {

let that = this;

that.setData({

currentTab: e.detail.current

})

},

//点击切换，滑块index赋值

clickTab: function (e) {

let that = this;

if (that.data.currentTab === e.currentTarget.dataset.current) {

return false;

} else {

that.setData({

currentTab: e.currentTarget.dataset.current

})

}

}

})