微信小程序 - tab分页实现

demo 地址: https://github.com/iotjin/Jh_weapp

效果图：

tab分页.gif

引用微信 tabs ，命令行执行之后重新构建npm

npm i @miniprogram-component-plus/tabs --save

js 代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    active: 1,
    arr:['1','2','3','4'],
    tabs: [],
    arr2: [],
    activeTab: 0,
  },

  onLoad() {

    wx.setNavigationBarTitle({
      title: 'tab分页加载'
    })

    const titles = ['首页', '外卖', '商超生鲜', '购物', '美食饮品', '生活服务', '休闲娱乐', '出行']
    const tabs = titles.map(item => ({ title: item }))
    this.setData({ tabs })
    this.setData({ arr2: ['11', '22', '33', '44'] })
  },

  onTabCLick(e) {
    const index = e.detail.index
    console.log('----------'+index);
    this.setData({ activeTab: index })
  },

  onChange(e) {
    const index = e.detail.index
    console.log('----------'+index);
    this.setData({ activeTab: index })
  }

})

json 代码：

{
  "usingComponents": {
  "mp-tabs": "@miniprogram-component-plus/tabs"
  },
  "disableScroll": true
}

wxml 代码：

  <mp-tabs 
  tabs="{{tabs}}" 
  activeTab="{{activeTab}}" 
  swiperClass="weui-tabs-swiper"
  bindtabclick="onTabCLick"
  bindchange="onChange"
  activeClass="tab-bar-title__selected"
>

  <block wx:for="{{tabs}}" wx:key="title">
    <view class="tab-content" slot="tab-content-{{index}}" > {{item.title}} </view>
  </block>

</mp-tabs>

wxss 代码：

.bgView {
  /* background-color: orange; */
  height: 500px;
  width: 100%;
}

.bg {
  /* background: red; */
  /* position: fixed;
  top: 0;
  height: 40px; */
}

page {
  background-color: pink;
  height: 100%;
}

/* ------------ weui -------------- */
.weui-tabs-bar__wrp {
  border-bottom: 1px solid #eee;
  position: fixed;
  top: 0;
  height: 30px; 
  z-index:9999;
}

.weui-tabs-swiper {
  margin-top: 30px;
  width: 100%;
  height: 500px;
  background-color: yellow;
}

.tab-content {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  /* padding: 40rpx; */
  background-color: orange;
}

.weui-tabs-bar__title {
  margin: 0px 10px;
}

.tab-bar-title__selected {
  font-size: 20px;
  font-weight: bold;
}