⼩程序--顶部状态栏切换
效果展⽰
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" > <!--栏⽬-1-->
<view wx:if="{{content==0}}">
<scroll-view scroll-y="true"class="scoll-h">
<view class="box">
<image src="wx1.sinaimg/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="wx1.sinaimg/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="wx1.sinaimg/large/008cmE87gy1gm1auvowm6g30dw0b04qp.gif"></image>
<image src="wx1.sinaimg/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="wx1.sinaimg/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="wx1.sinaimg/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="wx1.sinaimg/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;
box sizing
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',
.
.
.
.
.
.
.
.
.
.
.
.
完整代码获取

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。