微信小程序--动态状态栏切换

效果展示

Demo源码

index.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}}">
   <image src="{{images[index]}}"></image>
  </view>
 </block>
</mp-tabs>

index.wxss

page {
    background-color: #FFFFFF;
    height: 100%;
}

.weui-tabs-bar__wrp {
    border-bottom: 1px solid #eee;
    margin-top: 10px;
}

.weui-tabs-swiper {
    width: 100%;
    height: 100%;
}

.tab-content {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    box-sizing: border-box;
    padding: 40rpx;
}

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

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

index.json

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

index.js

Page({
  data: {
    tabs: [],
    activeTab: 0,
    images: ["https://wx1.sinaimg.cn/large/7139bff5ly1fjasmh731ig20dw0b04bx.gif",
      "https://wx1.sinaimg.cn/large/7139bff5ly1fjasmif6rxg20dw0b0qi7.gif",
      "https://wx1.sinaimg.cn/large/7139bff5ly1fjasmj6xx0g20dw0b0tjz.gif",
      "https://wx1.sinaimg.cn/large/7139bff5ly1fjasmk35e2g20dw0b0dno.gif",
      "https://wx1.sinaimg.cn/large/7139bff5ly1fjasmlutaig20dw0b0u0h.gif",
      "https://wx1.sinaimg.cn/large/7139bff5ly1fjasmnko9ng20dw0b0h5o.gif",
      "https://wx1.sinaimg.cn/large/7139bff5ly1fjasmphcu8g20dw0b07s0.gif",
      "https://wx1.sinaimg.cn/large/7139bff5ly1fjasmqi1iwg20dw0b04cb.gif"
    ]
  },

  onLoad() {
    const titles = ['栏目-1', '栏目-2', '栏目-3', '栏目-4', '栏目-5', '栏目-6', '栏目-7', '栏目-8']
    const tabs = titles.map(item => ({
      title: item
    }))
    this.setData({
      tabs
    })
  },

  onTabCLick(e) {
    const index = e.detail.index
    this.setData({
      activeTab: index
    })
  },

  onChange(e) {
    const index = e.detail.index
    this.setData({
      activeTab: index
    })
  }
})

components tabs index.wxml

<view class="weui-tabs">
  <view class="weui-tabs-bar__wrp" style="top:{{CustomBar}}px">
    <scroll-view scroll-x scroll-into-view="item_{{currentView}}" scroll-with-animation="{{animation}}">
      <view class="weui-tabs-bar__content">
        <block wx:for="{{tabs}}" wx:key="title">
          <view id="item_{{index}}" class="weui-tabs-bar__item" style="background-color: {{tabBackgroundColor}}; color: {{activeTab === index ? tabActiveTextColor : tabInactiveTextColor}};" bindtap="handleTabClick" data-index="{{index}}">
            <view class="weui-tabs-bar__title {{tabClass}} {{activeTab === index ? activeClass : ''}}" style="border-bottom-color: {{activeTab === index ? tabUnderlineColor : 'transparent'}}">
              <text class="">{{item.title}}</text>
            </view>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
  <swiper class="{{swiperClass}}" current="{{activeTab}}" duration="{{duration}}" bindchange="handleSwiperChange">
    <swiper-item  wx:for="{{tabs}}" wx:key="title">
      <scroll-view  scroll-y="true" style="height:100%;">
      <slot name="tab-content-{{index}}"></slot>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

components tabs index.wxss

.weui-tabs {
  width: 100%;
  height: 100%;
}

.weui-tabs-bar__wrp {
  width: 100%;
  background:white
}

.weui-tabs-bar__content {
  width: 100%;
  white-space: nowrap;
}

.weui-tabs-bar__item {
  display: inline-block;
}

.weui-tabs-bar__title {
  display: inline-block;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent
}

components tabs index.json

{
    "component": true,
    "usingComponents": {}
}

components tabs index.js

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/  // The module cache
.
.
.
.
.
.
.
.
.
完整代码获取如下