效果图:
代码:
<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‘:‘‘}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view> </block> </scroll-view> <!-- 页面内容 --> <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab"> <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content"> {{tabItem}} </swiper-item> </swiper> </view>
/**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: 20%;
display: inline-block;
text-align: center;
}
.nav-item.active{
color: red;
}
.tab-box{
background: greenyellow;
padding-top: 80rpx;
height: 100%;
box-sizing: border-box;
}
.tab-content{
overflow-y: scroll;
}
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: ‘Hello World‘,
userInfo: {},
hasUserInfo: false,
navData:[
{
text: ‘首页‘
},
{
text: ‘健康‘
},
{
text: ‘情感‘
},
{
text: ‘职场‘
},
{
text: ‘育儿‘
},
{
text: ‘纠纷‘
},
{
text: ‘青葱‘
},
{
text: ‘上课‘
},
{
text: ‘下课‘
}
],
currentTab: 0,
navScrollLeft: 0
},
//事件处理函数
onLoad: function () {
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
},
switchNav(event){
var cur = event.currentTarget.dataset.current;
//每个tab选项宽度占1/5
var singleNavWidth = this.data.windowWidth / 5;
//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 singleNavWidth = this.data.windowWidth / 5;
this.setData({
currentTab: cur,
navScrollLeft: (cur - 2) * singleNavWidth
});
}
})
原文 链接:https://www.cnblogs.com/till-the-end/p/8935152.html