微信小程序--顶部状态栏切换

效果展示

Demo代码

index.wxml

<view>
 <!-- tab栏 -->
 <view class='Tab'>
  <view class='tabImgL' bindtap='lefttab'>
   <image mode="widthFix" src='{{zuosrc}}'></image>
  </view>
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
   <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">模块一</view>
   <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">模块二</view>
   <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">模块三</view>
   <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">模块四</view>
   <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">模块五</view>
   <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">模块六</view>
  </scroll-view>
  <view class='tabImgR' bindtap='righttab'>
   <image mode="widthFix" src='{{yousrc}}'></image>
  </view>
 </view>
 <!-- 内容 -->
 <view class="tab-content" current="{{currentTab}}" duration="100" bindchange="switchTab" style="height:{{winHeight}}rpx">
  <!-- 栏目-1 -->
  <view wx:if="{{content==0}}">
   <scroll-view scroll-y="true" class="scoll-h">
    <view class="box">
     <image src="https://wx1.sinaimg.cn/large/008cmE87gy1gm1auszwo6g30dw0b04bx.gif"></image>
    </view>
   </scroll-view>
  </view>
  <!-- 栏目-2 -->
  <view wx:if="{{content==1}}">
   <scroll-view scroll-y="true" class="scoll-h">
    <view class="box">
     <image src="https://wx1.sinaimg.cn/large/008cmE87gy1gm1autawwdg30dw0b0qi7.gif"></image>
    </view>
   </scroll-view>
  </view>
  <!-- 栏目-3 -->
  <view wx:if="{{content==2}}">
   <scroll-view scroll-y="true" class="scoll-h">
    <view class="box">
     <image src="https://wx1.sinaimg.cn/large/008cmE87gy1gm1auvowm6g30dw0b04qp.gif"></image>
    </view>
   </scroll-view>
  </view>
  <!-- 栏目-4 -->
  <view wx:if="{{content==3}}">
   <scroll-view scroll-y="true" class="scoll-h">
    <view class="box">
     <image src="https://wx1.sinaimg.cn/large/008cmE87gy1gm1auvagqgg30dw0b04cb.gif"></image>
    </view>
   </scroll-view>
  </view>
  <!-- 栏目-5 -->
  <view wx:if="{{content==4}}">
   <scroll-view scroll-y="true" class="scoll-h">
    <view class="box">
     <image src="https://wx1.sinaimg.cn/large/008cmE87gy1gm1auux1kwg30dw0b07s0.gif"></image>
    </view>
   </scroll-view>
  </view>
  <!-- 栏目-6 -->
  <view wx:if="{{content==5}}">
   <scroll-view scroll-y="true" class="scoll-h">
    <view class="box">
     <image src="https://wx1.sinaimg.cn/large/008cmE87gy1gm1auumnkrg30dw0b0h5o.gif"></image>
    </view>
   </scroll-view>
  </view>
 </view>
</view>

index.wxss

Tab {
  width: 100%;
  background: #fff;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  top: 0;
  z-index: 9999;
  font-size: 32rpx;
  white-space: nowrap;
  color: #888;
  box-sizing: border-box;
  overflow: hidden;
}
 
/* 箭头 */
.tabImgL, .tabImgR {
  width: 8%;
  text-align: center;
  display: inline-block;
}
.tabImgL{
  text-align: left;
}
.tabImgR{
  text-align: right;
}
.tabImgL {
  position: fixed;
  top: 10rpx;
  left: 0;
}
 
.tabImgR {
  position: fixed;
  top: 10rpx;
  right: 0;
}
 
.tabImgL image, .tabImgR image {
  width: 80%;
}
 
/* tab栏切换样式 */
.tab-h {
  width: 84%;
  margin: 0 auto;
  position: fixed;
  height: 80rpx;
  line-height: 80rpx;
  top: 0;
  left: 8%;
}
 
.tab-item {
 width: 160rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 30rpx;
  text-align: center;
  position: relative;
  padding: 0 10rpx;
  display: inline-block;
}
 
.tab-item.active {
  width: 160rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: #ef7421;
  color: #fff;
  border-radius: 30rpx;
  text-align: center;
  position: relative;
  padding: 0 10rpx;
}

.box{
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

index.json

{
  "usingComponents": {}
}

index.js

var app = getApp();
Page({
  data: {
    winHeight: "",//窗口高度
    currentTab: 0, //预设当前项的值
    scrollLeft: 0, //tab标题的滚动条位置    
    swipperSpot:'0', //初始化轮播的点
    zuosrc:'../images/l1.png',
    yousrc:'../images/r1.png',
.
.
.
.
.
.

.
.
.

.
.
.

完整代码获取