tabs 使用

1 js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    /*新闻begin*/
    tabs: [{ title: '精选' }, { title: '全部' }, { title: '本县' }, { title: '本县' }, { title: '本村' }, { title: '关注' }]
  },

})

2 wjson

{
  "usingComponents": {
    "mp-tabs": "../../components/tabs/index"
  },

}

3 wxml

<view class="container">
    <mp-tabs 
  tabs="{{tabs}}" 
  activeTab="{{activeId}}" 
  swiperClass="weui-tabs-swiper"
  bindtabclick="onTabCLick"
  bindchange="onChange"
  tab-class="tab-item"
  activeClass="tab-bar-title__selected"
>
</mp-tabs>
</view>

4 wxss

.container{
  height: 100%;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.tab-item{
  padding: 15rpx;
  font-size: 12px;
}