点击上面导航切换下面内容
index.wxml文件
<!-- 导航 -->
<view class='top_nav'>
<view class="nav-name {{item.typeId == currentId ? 'nav-hover':''}}" wx:for="{{section}}" wx:key="id" id='{{item.typeId}}' catchtap='handleTap'>
{{item.name}}
</view>
</view>
<!-- html课程 -->
<view hidden='{{currentId!=1}}'>
<text>我是html课程</text>
</view>
<!-- css课程 -->
<view hidden='{{currentId!=2}}'>
<text>我是css课程</text>
</view>
<!-- js课程 -->
<view hidden='{{currentId!=3}}'>
<text>我是js课程</text>
</view>
index.js文件
Page({
/**
* 页面的初始数据
*/
data: {
currentId: '1',
section: [{
name: 'HTML',
typeId: '1'
}, {
name: 'CSS',
typeId: '2'
}, {
name: 'JS',
typeId: '3'
}],
},
//点击每个导航的点击事件
handleTap: function(e) {
let id = e.currentTarget.id;
if(id){
this.setData({
currentId:id
})
}
},
})
index.wxss文件
.top_nav{
border-bottom: 1px solid #e6d9af;
}
.nav-name{
display: inline-block;
color: #2b2e33;
padding: 18rpx 18rpx 10rpx 18rpx;
font-size: 30rpx;
}
.nav-hover{
color: #f5a623;
font-size: 44rpx;
}
最后上一个效果图