小程序tab组件封装

demo

下面是html部分

<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':''}}" bindtap='toggle' data-index="{{index}}">{{item}}</view>
  </view>
  <view class="tab-content" style="padding-top:{{paddingTop}}">
    <view wx:for="{{tabTitle}}"   class="tab-contents {{num==index?'on':''}}">
      <slot name="{{index}}"></slot>
    </view>
  </view>
</view>

下面是css部分

.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部分

Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true //在组件定义时的选项中启用多slot支持
  },
  properties: {
    tabTitle: {
      type: Array,
      value: []
    },
    positionTop: {
      type: String,
      value: "0"
    },
    paddingTop: {
      type: String,
      value: "80rpx"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    num: 0
  },

  lifetimes:{
    attached(){
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toggle(e) {
      let that = this
      if (this.data.num == e.currentTarget.dataset.index) {
        return false;
      } else {
        this.setData({
          num: e.currentTarget.dataset.index
        })
      }
    }
  }
})

如果需要在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'] 
    }
  })