使用微信小程序自定义组件实现的tabs选项卡功能——解决自适应高度

tabs选项卡

• 网上代码很多，基本上是标题选项卡使用<view>，如果多一点就是用<scroll-view>。因为要实现滑动切换，所以下面显示内容使用<swiper>。
• 下面的js就来判断点击的或者滑动的当前序号值。

    Page({
      data: {
       currentTab:0
      },
      swiperTab:function(e)
      {
        var that = this;
        that.setData({
          currentTab: e.detail.current
        });
      },
      clickTab: function (e) {
        console.log(this.data.currentTab === e.target.dataset.current);
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
          this.setData({
            currentTab: e.target.dataset.current
          })
        }
      }
    })

解决自适应高度

• 当你写完js之后，调试程序会发现高度只显示了一半，不会自动显示整个屏幕。所以本文主要解决高度自适应的操作。
  见代码

onLoad: function() {  
    var that = this; //注意作用域
    //  高度自适应
     wx.getSystemInfo( {  
     success: function( res ) {  
     var clientHeight=res.windowHeight,//获取窗口高度
     clientWidth=res.windowWidth,//获取窗口宽度
     rpxR=750/clientWidth;//算出相对的单位值
     var  calc=clientHeight*rpxR-numH;//将所获取的高度乘上单位值。再减去之前你的**选项卡标题和页面内其他占用高度的元素的高度和numH**。（也可不减，不减去会产生纵向的滚动条）
     console.log(calc)
     that.setData( {  
         winHeight: calc  //发送给data。
     });  
    }  
  });
}

这样做弥补了高度不能自动适应，给他一个适配量，即代码中的单位量 rpxR，即可。