微信小程序tab組件封裝

最近在做微信小程序的項目，下面就微信小程序中tab的tab功能封裝成一個組件，在項目項需要使用的地方可以隨時調取，如果你有vue的基礎可以快速的理解和上手，廢話不多說，直接上代碼

下面是html部分

<!--這是tab.wxml-->
<view class="contain">
    <view class="tab" style="position:fixed;left:0;top:{{positionTop}}"> 
          <view wx:for="{{tabTitle}}" wx:key="{{index}}" class="tab-son {{num==index?'active':''}}" bindtip='toggle' data-index={{index}}>{{item}}</view>
    </view> 
    <view class="tab-content" style="padding-top:{{paddingTop}}">
        <view wx:for="{{tabTitle}}" wx:key="{{index}}" class="tab-contents {{num==index?'on':''}}">
            <slot name="{{index}}"></slot>
        </view>
    </view>
</view>

下面是css部分

/*這是tab.wxss部分,樣式可以根據自己的需求自己改變*/
.contain{
}
.active{
    color:#0770EB;
    height:74rpx;
    border-bottom:3px solid #0770EB;
}
.tab{
    width:100%;
    display:flex;
    align-item:flex-end;
    justify-content:space-around;
    background-color:#fff;
    height:80rpx;
    font-size:26rpx;
    z-index:999;
    text-align:center;
    line-height:80rpx;
    box-shadow:4px 4px 10px #f2f2f2;
}
.tab-content{
    overflow:scroll;
}
.tab-contents{
    display:none;
}
.on{
     display:block;
}

下面是js部分

//這是tab.js部分
Component({
  //下面是組件的屬性列表
    options:{
        multipleSlots:true //在組件定義時的選項中啟用多slot支持
    },
    properties:{
        tabTitle:{
            type:Object,
            value:[]
        },
        positionTop:{
             type:String,
             value:"0"
        }
          paddingTop:{
             type:String,
             value:"80rpx"
        }
    },
        //組件的初始數據
    data:{
        num:0
    },
        //組件的方法列表
    methods:{
        toggle:function(e){
            if(this.data.num===e.currentTarget.dataset.index){
                return false;
             }else{
              this.setData({
                  num:e.currentTarget.dataset.index;
            })
          }
      }
    }




})

下面是tab.json部分

{
  "component":true,
   "usingComponents":{

    }
}

下面就是高潮部分了，同志們要扶好把手

如果需要在index.wxml的頁面中使用tab組件，需要在index文件夾中的index.json里面引入，如下：

{
     "usingComponent":{
      "tabView":"../components/tab/tab" //這是組件所在的路徑，前面是自定義的tab的元素名
  }
}
 

在index.wxml中使用自定義的tabView的元素名

  <tabView tabTitle="{{tabTitle}}" positionTop="自定義大小，也可以不寫，根據自己實際情況" paddingTop="自定義大小，也可以不寫，根據自己實際情況">
      <view slot="0">
        自己的頁面
      </view>
      <view slot="1">
        自己的頁面
      </view>
      <view slot="2">
        自己的頁面
      </view>
    
  </tabView>

下面是index.js

  Page({
    data:{
        tabTitle:['tab1','tab2','tab3'] //這個可以寫成死的數據，也可以接收后臺返回的，寫成動態(tài)的
    }
  })

這就是微信小程序完整的tab組件的封裝與使用方法，如果有不對的地方歡迎指正，哪位大神有更好的方法，可以留言，如果有不對的地方也歡迎指正。