【微信小程序】实现tab选项卡

最新推荐文章于 2024-02-28 05:00:00 发布

Jone_ZhangH

最新推荐文章于 2024-02-28 05:00:00 发布

阅读量161

点赞数

分类专栏： C2-微信小程序

本文链接：https://blog.csdn.net/tcctcszhanghao/article/details/104307972

版权

C2-微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js文件：

Page({
  data: {
    btns: ["第一页", "第二页"],
    active: 0,//控制当前显示盒子 
  },
  toggle: function (e) {
    this.setData({
      //设置active的值为用户点击按钮的索引值
      active: e.currentTarget.dataset.index,
    })
  },

wxml文件：

  <!-- tab内容 -->
  <view class="btns">
    <view wx:for="{{btns}}" class="{{index==active?'cur':''}}" 
    data-index="{{index}}" bindtap="toggle">{{item}}</view>
  </view>   

  <!-- tab下具体内容 -->
  <view class="cons">
    <!-- 1信息 -->
    <view hidden="{{active != 0}}">123
    </view>

    <!-- 2信息 -->
    <view hidden="{{active != 1}}">321
    </view>
  </view>