【无标题】

记录一下自制底部tabbar 的代码
js

const App=getApp()
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    PageHeight:"",
    BarHeight:'',
    currentData : 0,
    iconData:"",
    icon1:"/image/详情页/u410.png",
    icon2:"/image/详情页/u415.png"
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 获取通知栏高度
    wx.getSystemInfoAsync({
      success(res) {
        console.log(res.statusBarHeight)
        that.setData({
          BarHeight: res.statusBarHeight,
          PageHeight:res.windowHeight-res.statusBarHeight-((res.windowWidth/750)*2*(55+55)),
        })
      }
    })
   
  },
  //获取当前滑块的index
  bindchange:function(e){
    const that  = this;
    that.setData({
      currentData: e.detail.current,
    })
    // 根据currentData切换图片
    if(this.data.currentData==1){
      // console.log("进入的if")
      this.setData({ 
        icon1:"/image/详情页/u536.png",
        icon2:"/image/详情页/u541.png"
      })
      }
      else{
        // console.log("进入的else")
        this.setData({ 
         
          icon1:"/image/详情页/u410.png",
          icon2:"/image/详情页/u415.png"
      })
      }
   
   
  },


  //点击切换，滑块index赋值
  checkCurrent:function(e){
    const that = this;
 
    if (that.data.currentData === e.target.dataset.current){
        return false;
    }else{
 
      that.setData({
        currentData: e.target.dataset.current
      })
    }

    
  }
})

json

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

wxml

  
    
    返回
  

 



  welcome come to 推荐
  welcome come to 热点




    
    
       
      影片信息
     
    
    
       
   收视数据
    

wxss

/* pages/tvInfom/tvInfom.wxss */
.blank{
  width: 100%;
  background-color: #ebf0f4;
  position: fixed;
  top: 0;
  z-index: 2;
}
/* 标题 */
.title {
  height: 110rpx;
  width: 100%;
  background-color:#ebf0f4; 
  z-index: 2;
  position: fixed;
  
}

.titleFont {
  width: 100%;
  height: 110rpx;
  padding-top: 40rpx;
  display: flex;
 flex-direction: row;
}


/* 选项卡 */


.tab {
  /* float: left; */
  width: 50%;
  text-align: center;
  padding: 10rpx 0;
  background-color: burlywood;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  font-size: small;
  
}

.bottomTabSwiper {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  /* zoom: 1; */
  /* background-color: burlywood; */
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
}
 
.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}


.tabIcon{
  display: flex;
    height: 60rpx;
    width: 100%;
    /* background-color: chartreuse; */
    justify-content: center;
  }
.tabBorer {
  /* border-bottom: 1px solid #f00; */
  color: #2f6bb3;
}
 
.swiper {
  width: 100%;
  height: 100%;
  background-color: cadetblue;
}
 
.swiper_con {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 80rpx 0;
}