微信小程序之创建顶部tab菜单栏切换（新手学习）

关于顶部菜单tab菜单栏切换，可以有两种写法，但是都是用到swiper这个视图插件。插件介绍可以查看微信小程序开放文档。

第一种方式：

效果图

.wxml

<view>tap切换 方法一</view>
<view class="swiper_tab_view">
  <scroll-view scroll-x='true' scroll-left="{{scrollleft}}" class='tab-h'>
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">模块1</view>

    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">模块2</view>

    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">模块3</view>

    <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">模块4</view>

    <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">模块5</view>

    <view class="swiper-tab-list {{currentTab==5 ? 'on' : ''}}" data-current="5" bindtap="swichNav">模块6</view>
  </scroll-view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}rpx" bindchange="bindChange">

  <swiper-item>
    <view>模块1</view>
  </swiper-item>

  <swiper-item>
    <view>模块2</view>
  </swiper-item>

  <swiper-item>
    <view>模块3</view>
  </swiper-item>

  <swiper-item>
    <view>模块4</view>
  </swiper-item>

  <swiper-item>
    <view>模块5</view>
  </swiper-item>

  <swiper-item>
    <view>模块6</view>
  </swiper-item>

</swiper>

.wxss

.tab-h{
  height: 57rpx;
  width: 100%;
  line-height: 51rpx;
  background: white;
  font-size: 16px;
  white-space: nowrap;
  z-index: 999;
  margin-top: 20rpx;
}
 
.swiper_tab_view{
  width: 100%;
  text-align: center;
  line-height: 80rpx;
}
 
.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
  width: 20%;
  color: #fff;
  background-color:#000;
}
 
.on {
  color: #ff0000;
  border-bottom: 5rpx solid #ff0000;
  background-color:#ef9ba8;
}
 
.swiper-box {
  display: block;
  height: 100rpx;
  width: 100%;
  overflow: hidden;
  background-color: #00ff00
}
 

.js

 data: {
    
    //tap切换自定义宽高
    winWidth: 0,
    winHeight: 0,
    // tab切换，方法一
   
    scrollleft: 0,
    currentTab: 0,
   
  },

  /** 
   * 点击tab切换 方法一
   */
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },

  checkCor: function () {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollleft: 300
      })
    } else {
      this.setData({
        scrollleft: 0
      })
    }
  },
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    /** 
     * 获取系统信息,系统宽高
     */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }

    });

  },

第二种方式：

.wxml

<view>tab切换 方法二</view>
<view class="nav_title">
  <view class="nav_tab">
    <view wx:for="{{list}}" class="{{selected==index?'hidden':'show'}}" data-index='{{index}}' bindtap="selected">{{item}}
      <view class="{{selected==index?'nav_underline':''}}"></view>
    </view>
  </view>
  <!-- tab框显示内容 -->
  <view class="tab_view" wx:if="{{selected == 0}}" style="height:{{winHeight - 40}}rpx">aaa</view>
  <view class="tab_view" wx:if="{{selected == 1}}" style="height:{{winHeight - 40}}rpx">bbb</view>
  <view class="tab_view" wx:if="{{selected == 2}}" style="height:{{winHeight - 40}}rpx">ccc</view>
  <view class="tab_view" wx:if="{{selected == 3}}" style="height:{{winHeight - 40}}rpx">ddd</view>
</view>

.wxss

/* tab切换 方法二 */
 .nav_tab{
  width:100%;
  height:100rpx;
  display:flex;
  flex-direction:row;

}
.show{
  line-height:100rpx;
  text-align:center;
  flex:1;
  color:#000;
  font-size:28rpx;
  opacity: 0.5;
}
.hidden{
  line-height:100rpx;
  text-align:center;
  color:#00ff00;
  flex:1;
  font-size:28rpx;
}
.nav_underline{
  background:#00ff00;
  width:54rpx;
  height:6rpx;
  margin-top:-10rpx;
  margin-left:70rpx;
  border-radius:8rpx;
}
.tab_view{
  width:100%;
}

.js

  /**
   * 页面的初始数据
   */
  data: {

    // tab切换，方法二
    selected: 0,
    list: ['模块1', '模块2', '模块3', '模块4'],
  
  },
  //tab框切换 方法二
  selected: function (e) {
    console.log(e)
    let that = this
    let index = e.currentTarget.dataset.index
    console.log(index)
    if (index == 0) {
      that.setData({
        selected: 0
      })
    } else if (index == 1) {
      that.setData({
        selected: 1
      })
    } else if (index == 2) {
      that.setData({
        selected: 2
      })
    } else {
      that.setData({
        selected: 3
      })
    }
  },
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    /** 
     * 获取系统信息,系统宽高
     */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
 
    });
},

 

 

这两种方式是我在看了两位大神的博客后进行总结的，不过忘了是哪两位大神的了。

 

 

目前正在学习小程序，这是作为新手的我自己写的笔记，哪里写的不准确还请指点，补充。