微信小程序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'] //这个可以写成死的数据，也可以接收后台返回的，写成动态的
    }
  })

这就是微信小程序完整的tab组件的封装与使用方法，如果有不对的地方欢迎指正，哪位大神有更好的方法，可以留言，如果有不对的地方也欢迎指正。