微信小程序实现tab点击切换

本文实例为大家分享了微信小程序无滑动效果的tab点击切换的具体代码，供大家参考，具体内容如下

<!--pages/dingdan/dingdan.wxml-->
<view class="body">
  <view class="swiper-tab">
    <view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="{{index}}">{{item.title}}({{item.num}})
      <hr class="{{page==index?'selected-line':'unselect-line'}}" />
    </view>
  </view>

  <view class="view-Content">
    <view wx:for="{{tabList}}" wx:key="index" class="{{page==index?'show tabCon':'hidden tabCon'}}">
      <view class="content">
        <text>暂无订单{{index}}</text>
      </view>
    </view>
  </view>

</view>

/* pages/dingdan/dingdan.wxss */
page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* background: pink; */
}

.body {
  height: 100%;
  /* background: hotpink; */
  display: flex;
  flex-direction: column;
}

/* tab栏 */
.swiper-tab {
  width: 100%;
  height: 80rpx;
  text-align: center;
  display: flex;
  justify-content: space-between;
  background: white;
}

.selected-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ff5050;
  background: #fff;
  font-size: 32rpx;
  font-weight: bold;
  font-family: PingFang SC;
  font-weight: 400;
  width: 33%;
  height: 60rpx;
  line-height: 60rpx;
  opacity: 1;
  /* border-bottom: 2px solid #ff5050; */
  position: relative;
}

.unselect-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4f4f50;
  width: 33%;
  height: 60rpx;
  line-height: 60rpx;
  background: #fff;
  opacity: 1;
  position: relative;
  /* border-radius: 34rpx; */
}

.selected-line {
  background: #ff5050;
  height: 4rpx;
  width: 90rpx;
  position: absolute;
  /* margin-top: 10rpx; */
  bottom: -18rpx;
  width: 60rpx;
}

/* 内容 */
.view-Content {
  flex: 1;
  overflow-y: auto;
  background-color: rgb(236, 236, 236);
}

.tabCon {
  height: 100%;
}

/* 展示隐藏 */
.show {
  display: block;
}

.hidden {
  display: none;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    page: 0, // page：当前页--
    tabList: [{
      title: '菜单1',
      num: 0
    }, {
      title: '菜单2',
      num: 0
    }, {
      title: '菜单3',
      num: 0
    }],
  },

  // 切换tab
  change: function (event) {
    console.log('切换时会调用', event);
    var a = event.currentTarget.dataset.pageid
    this.setData({
      page: a,
    })
  },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。