小程序tab组件封装

demo

下面是html部分

  
    {{item}}
  
  
    
      
    
  

下面是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的元素名

  
      
        自己的页面
      
      
        自己的页面
      
      
        自己的页面
      
    
  

下面是index.js

  Page({
    data:{
        tabTitle:['tab1','tab2','tab3'] 
    }
  })