最近接手一个需要tab切换的小程序,废话不多说,直接上代码
1、wxml
<view class="container">
<!-- tab导航栏 -->
<!-- scroll-left属性可以控制滚动条位置 -->
<!-- scroll-with-animation滚动添加动画过渡 -->
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
<view class="nav-item {{currentTab == idx ?'active':''}}" style='width:{{tab_width}}%' data-current="{{idx}}" bindtap="switchNav">{{navItem.text}} </view>
</block>
</scroll-view>
<!-- 页面内容 -->
<swiper class="tab-box" current="{{currentTab}}" duration="100" bindchange="switchTab">
<swiper-item wx:for="{{contentDada}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
{{tabItem.text}}
</swiper-item>
</swiper>
</view>
2、wxss
/**index.wxss**/
page{
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
}
.nav {
height: 80rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 80rpx;
background: #f7f7f7;
font-size: 16px;
white-space: nowrap;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.nav-item {
/* width: 33.3%; */
display: inline-block;
text-align: center;
}
.nav-item.active{
color: red;
}
.tab-box{
background: yellow;
height: 100%;
box-sizing: border-box;
width: 100%;
}
.tab-content{
overflow-y: scroll;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
3、js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
navData: [
{
text: '1'
},
{
text: '2'
},
{
text: '3'
},
{
text: '4'
},
{
text: '5'
},
{
text: '6'
},
{
text: '7'
},
{
text: '8'
},
{
text: '9'
}
],
contentDada:[
{
text: '内容1'
},
{
text: '内容2'
},
{
text: '内容3'
},
{
text: '内容4'
},
{
text: '内容5'
},
{
text: '内容6'
},
{
text: '内容7'
},
{
text: '内容8'
},
{
text: '内容9'
}
],
currentTab: 0,
navScrollLeft: 0,
tab_width:0
},
//事件处理函数
onLoad: function () {
if(this.data.navData.length == 1){
this.setData({
tab_width : 100
})
} else if (this.data.navData.length == 2){
this.setData({
tab_width: 50
})
}else{
this.setData({
tab_width: 33.3
})
}
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
wx.request({
url: '',
data:{
},
header: {
'content-type': 'application/json'
},
success(res) {
console.log(res.data)
}
})
},
// 顶部导航实现
switchNav(event) {
var cur = event.currentTarget.dataset.current;
console.log(cur)
//每个tab选项宽度占,最多显示3个tab
var navDataLength = this.data.navData.length;
if (this.data.navData.length >= 3){
navDataLength = 3
}
var singleNavWidth = this.data.windowWidth / navDataLength;
//tab选项居中
this.setData({
navScrollLeft: (cur - 2) * singleNavWidth
})
if (this.data.currentTab == cur) {
return false;
} else {
this.setData({
currentTab: cur
})
}
},
// 内容区域实现
switchTab(event) {
var cur = event.detail.current;
var navDataLength = this.data.navData.length;
if (this.data.navData.length >= 3) {
navDataLength = 3
}
console.log(cur)
var singleNavWidth = this.data.windowWidth / navDataLength;
this.setData({
currentTab: cur,
navScrollLeft: (cur - 1) * singleNavWidth
});
}
})