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

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

第一种方式：

效果图

.wxml

tap切换 方法一

  
    模块1

    模块2

    模块3

    模块4

    模块5

    模块6
  



  
    模块1
  

  
    模块2
  

  
    模块3
  

  
    模块4
  

  
    模块5
  

  
    模块6
  

.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

tab切换 方法二

  
    {{item}}
      
    
  
  
  aaa
  bbb
  ccc
  ddd

.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
        });
      }
 
    });
},

 

 

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

 

 

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