微信小程序 tab切换组件封装

参考地址：https://www.cnblogs.com/aomeng/p/13561668.html

components/tabs/tabs.js

// components/tabs/tabs.js
// tabs切换封装
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList: Object,
    tabIndex: {
      type:Number,
      value:0
    }
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    tabsChange(e) {
      const {
        index
      } = e.currentTarget.dataset;
      this.triggerEvent("tabsChange", {
        index
      })
    }
  }
})

components/tabs/tabs.wxml

<!--components/tabs/tabs.wxml-->
<view class="tabs">
  <view class="tabs_header">
    <scroll-view scroll-x="true" class="scroll-view">
      <view wx:for="{{tabList}}" wx:key="id" class="tabs_header_item  {{tabIndex == index?'active':''}}"
        bindtap="tabsChange" data-index="{{index}}">
        <text>{{item.value}}</text><text class="badge">{{item.number}}</text>
      </view>
    </scroll-view>
  </view>
  <view class="tabs_content">
    <slot></slot>
  </view>
</view>

components/tabs/tabs.wxss

/* components/tabs/tabs.wxss */
page,
.tabs {
  width: 100%;
}

.tabs_header {
  background: #FFFFFF;
  font-size: 28rpx;
  color: #7E8388;
  padding: 0 24rpx;
  width: 100vw;
  height: 88rpx;
}

.scroll-view {
  white-space: nowrap;
  height: 100%;
  width: 100%;
}

.tabs_header_item {
  box-sizing: border-box;
  width: 164rpx;
  height: 88rpx;
  line-height: 88rpx;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.badge{
  margin-left: 10rpx;
}

.active {
  position: relative;
  color: #021224;
  font-weight: bold;
}

.active:after {
  content: '';
  position: absolute;
  left: 44rpx;
  bottom: 0;
  width: 40rpx;
  height: 6rpx;
  background: #021224;
border-radius: 2px;
}

 

使用:

父组件json文件引入

{
  "usingComponents": {
    "nodata": "../../../components/nodata/nodata",
    "tabs": "../../../components/tabs/tabs"
  }
}

父组件wxml文件使用

 <nodata imgName="{{'img_no_data.png'}}" hintText="{{'暂无数据'}}"></nodata>