小程序tab选项卡

 

造轮子啦 ！ 造轮子啦！！造轮子啦！！！重要的事情说三遍！！！！

wxml:

<view class='tab'>

<view class='{{tag == index?"true":"false"}}' wx:for='{{4}}' wx:key='key' data-index='{{index}}' catchtap='btn'>页面{{index}}</view>

</view>

 

<swiper current="{{tag}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

<!-- 页面一 -->

<swiper-item>

<scroll-view class='scroll' scroll-y='true'>

页面一

</scroll-view>

</swiper-item>

<!-- 页面二 -->

<swiper-item>

<scroll-view style='height:100%;' scroll-y='true'>

页面二

</scroll-view>

</swiper-item>

<!-- 页面三 -->

<swiper-item>

<scroll-view style='height:100%;' scroll-y='true'>

页面三

</scroll-view>

</swiper-item>

<!-- 页面四 -->

<swiper-item>

<scroll-view style='height:100%;' scroll-y='true'>

页面四

</scroll-view>

</swiper-item>

</swiper>

 

wxss:

page {

overflow: hidden;

}

 

.tab {

width: 95%;

height: 80rpx;

margin: 0 auto;

display: flex;

justify-content: space-around;

}

 

.true {

width: 20%;

height: 80rpx;

line-height: 80rpx;

text-align: center;

color: orange;

border-bottom: 5rpx solid orange;

font-size: 35rpx;

}

 

.false {

width: 20%;

height: 80rpx;

line-height: 80rpx;

text-align: center;

font-size: 33rpx;

}

 

.swiper-box {

display: block;

height: 100%;

width: 100%;

overflow: hidden;

text-align: center;

background: #ddd;

margin-top: 10rpx;

}

 

js:

Page({

 

/**

* 页面的初始数据

*/

data: {

tag: 0,

},

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(e) {

var that = this

/** 获取系统信息 */

wx.getSystemInfo({

success: function(res) {

that.setData({

winWidth: res.windowWidth,

winHeight: res.windowHeight

});

}

});

},

// 点击事件

btn: function(e) {

var that = this;

console.log(e.currentTarget.dataset.index, "点击")

var tag = e.currentTarget.dataset.index;

// console.log(tag, "e")

that.setData({

tag: tag,

})

 

},

// 滑动切换tab

bindChange: function(e) {

console.log(e, "滑动")

var that = this;

that.setData({

tag: e.detail.current

});

 

},

})