index.wxml
<view class="menu">
<navigator wx:for="{{shouye}}"bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator>
</view>
<swiper current='{{page}}' bindchange="changepage">
<swiper-item wx:for="{{shouye}}">
<view class="view1">{{item}}</view>
</swiper-item>
</swiper>
index.js
Page({
data: {
shouye: ['首页', '日程', '闹钟', '课程', '娱乐'],
page: 0
},
change: function (event) {
var a = event.currentTarget.dataset.pageid
this.setData({
page: a
})
},
changepage: function (event) {
console.log(event)
var a = event.detail.current
this.setData({
page: a
})
}
})
index.wxss
/* pages/index/index.wxss */
scroll-view{
width: 100%;
height: 100%;
display: flex;
}
.menu{
background-color: red;
display: flex;
height: 60rpx;
font-size: 40rpx;
line-height: 70rpx;
flex-direction: row;
justify-content: space-around;
}
.font-white{
border-bottom: 5rpx solid black;
font-weight: bold;
}
.font-black{
}
.view1{
height: 100%;
}
来源：https://www.freesion.com/article/6345624381/