微信小程序导航栏 点击显示对应的内容代码
点击不同按钮,可以在界面上看到对应的内容
方法一:
<!-- wxml代码 -->
<view>
<button bindtap="showContent1">按钮1</button>
<button bindtap="showContent2">按钮2</button>
<button bindtap="showContent3">按钮3</button>
</view>
<view>
<text wx:if="{{show1}}">这是内容1</text>
<text wx:if="{{show2}}">这是内容2</text>
<text wx:if="{{show3}}">这是内容3</text>
</view>
// js代码
Page({
data: {
show1: false,
show2: false,
show3: false
},
showContent1: function() {
this.setData({
show1: true,
show2: false,
show3: false
})
},
showContent2: function() {
this.setData({
show1: false,
show2: true,
show3: false
})
},
showContent3: function() {
this.setData({
show1: false,
show2: false,
show3: true
})
}
})
方法二:
<!--wxml部分-->
<view class="tab">
<view class="tab-item {{ currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">标签1</view>
<view class="tab-item {{ currentTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">标签2</view>
<view class="tab-item {{ currentTab === 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">标签3</view>
</view>
<view class="content">
<view wx:if="{{ currentTab === 0 }}">标签1对应的内容</view>
<view wx:if="{{ currentTab === 1 }}">标签2对应的内容</view>
<view wx:if="{{ currentTab === 2 }}">标签3对应的内容</view>
</view>
//js部分
Page({
data: {
currentTab: 0
},
switchTab: function(e) {
var index = parseInt(e.currentTarget.dataset.index);
if (this.data.currentTab === index) {
return false;
} else {
this.setData({
currentTab: index
})
}
}
})