微信小程序导航栏点击显示对应的内容代码

weixin_46504346

已于 2023-06-08 11:09:51 修改

阅读量623

点赞数

文章标签： css 前端 javascript

于 2023-06-07 16:41:29 首次发布

本文链接：https://blog.csdn.net/weixin_46504346/article/details/131091092

版权

微信小程序导航栏点击显示对应的内容代码

点击不同按钮，可以在界面上看到对应的内容

方法一：

<!-- 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
      })
    }
  }
})