小程序的tab切换还是比较简答的。其原理是根据一个标识来判断是显示还是隐藏。如果tab下面是相同的布局还好说，如果每个tab下的布局都不相同，就需要把布局都写出来。在点击的时候，更改标识就可以达到目的

1，标题头

!-- 顶部tab切换 --

view class='m-tabswra'

view class='tabs'

!-- 选中状态添加selected --

view class="{{plans?'tab selected ':'tab'}}" bindtap='btnplan'新建采购计划/view

view class="{{goods?'tab selected ':'tab'}}" bindtap='btngoods'待收货/view

view class="{{completed?'tab selected ':'tab'}}" bindtap='btncompleted'已完成/view

/view

/view

2，具体内容

!-- tab内容模块 里面包含三个模块，可以根据不同的tab切换--

view class='m-tabcontentera'

!-- 新建采购计划模块 --

view class="{{plans?'new-planwra':'hidden'}}"

!-- 选择供应商模块 --

view class='supplierwra'

view class='title'选择供应商/view

!-- 搜索 --

view class='search'

view class='inputwra'

input placeholder="请输入供应商名称最少2个字" placeholder-style="color:#ccc" bindinput="supplier" maxlength='60'/

/view

!-- 取此处的点击范围，加大了点击范围，提高用户体验 --

view class='c-searchicon' bindtap='serach'

image src='../../resource/images/searchicon.png'/image

/view

/view

!-- 搜索 end--

/view

!-- 选择供应商模块end --

!-- 供应商列表 默认是隐藏的，只有搜索有结果的时候，显示--

view class="{{supplier?'supplierlist':'hidden'}}"

block wx:for="{{supplierlist}}"

!-- block --

!-- 循环 读取后台数据循环--

view class='supplierlist-item' data-id="{{item.id}}" data-name="{{item.name}}" bindtap='chooseSupplier'{{item.name}}/view

/block

/view

!-- 供应商列表 end--

/view

!-- 新建采购计划模块end --

!-- 待收货 --

view class="{{goods?'goodslist ':'hidden'}}"

view

!-- 循环 --

view class='goodslist_item' wx:for="{{drugsList}}"

view class='goodsinfo'

view class='name'{{item.name}}/view

view class="numtext "

view class="{{item.number1?'num1 ':'hidden'}}"等

/view

text class='num'{{item.number}}/text个药品/view

/view

view class='indentinfo'

view class='info'

view class='time'下单时间：{{item.createTimes}}/view

/view

view class='info'供应商：{{item.supplierName}}/view

/view

view class='moneyinfo'

view class='moneynum'订单金额:￥{{item.orderPrice}}/view

view class='option adjust' data-id="{{item.id}}" bindtap='adjustOrder'调整订单/view

view class='option back' data-id="{{item.id}}" bindtap='receiveGoods'收货付款/view

/view

/view

/view

/view

!-- 待收货 end--

!-- 已完成 --

view class="{{completed?'completewra ':'hidden'}}"

view class='process'

view class='progressbar'

view class='title'本月进货补贴完成进度/view

!-- 在此处动态设置计算的宽度 --

view class='barwra'

progress percent="{{percent}}" color="#58B2DC" stroke-width="20rpx" /

/view

/view

view class='percentage'

view class='bluenum'{{prograssing}}/view

view class='graynum'/{{totalPrograss}}/view

/view

/view

view class='goodslist'

block wx:for="{{completedOrderList}}"

!-- 循环 --

view class='goodslist_item'

view class='goodsinfo'

view class='name'{{item.name}}/view

view class='numtext'等

text class='num'{{item.number}}/text个药品/view

/view

view class='indentinfo'

view class='info'

view class='time'下单时间：{{item.createTimes}}/view

/view

view class='info'供应商：{{item.supplierName}}/view

/view

view class='moneyinfo'

view class='moneynum'订单金额:￥{{item.orderPrice}}/view

block wx:if="{{item.orderState=='2'}}"

view class='moneying'{{item.orderStates}}/view

/block

block wx:else

view class='moneyed'{{item.orderStates}}/view

/block

/view

/view

/block

/view

/view

!-- 已完成 end--

/view

!-- tab内容模块 end --

3，css文件

/* pages/order/order.wxss */

page{

display: block;

min-height: 100%;

background: #f2f2f2;

}

.m-tabswra{

height: 120rpx;

}

.m-tabswra .tabs{

width: 660rpx;

background:#fff;

height: 80rpx;

border-radius: 40rpx;

margin: 20rpx auto 0;

color:#666;

line-height: 80rpx;

font-size: 28rpx;

display:-webkit-flex;

display:flex;

display:-moz-box;

display:-webkit-box;

overflow: hidden;

}

.m-tabswra .tab{

width: 220rpx;

text-align: center;

box-sizing: border-box;

}

.tab:nth-child(2){

border-left: 1px solid #dedede;

border-right: 1px solid #dedede;

}

.tab.selected{

background: #6A9CE4;

color: #fff;

}

.m-tabcontentera .dn{

display: none!important;

}

.new-planwra .supplierwra{

background: #fff;

margin-bottom: 20rpx;

overflow: hidden;

}

.new-planwra .supplierwra .title{

padding: 4rpx 0 0 52rpx;

box-sizing: border-box;

height: 86rpx;

line-height: 86rpx;

color:#333;

font-size: 32rpx;

font-weight: 700;

}

.new-planwra .supplierwra .search{

width: 720rpx;

box-sizing: border-box;

margin: 0 auto 30rpx;

display:-webkit-flex;

display:flex;

display:-moz-box;

display:-webkit-box;

padding: 16rpx 0 16rpx 37rpx;

border: 1px solid #dedede;

border-radius: 46rpx;

}

.new-planwra .supplierwra .search .inputwra{

-moz-box-flex:1;

-webkit-box-flex:1;

}

.new-planwra .supplierwra .search input{

height: 40rpx;

font-size: 28rpx;

}

.new-planwra .supplierwra .c-searchicon{

padding: 0 38rpx 0 30rpx;

}

.c-searchicon image{

width: 44rpx;

height: 44rpx;

}

.new-planwra .supplierlist{

background: #fff;

/* padding:0 40rpx; */

box-sizing: border-box;

font-size: 28rpx;

color:#333;

}

.new-planwra .supplierlist-item{

border-bottom: 1px solid #dedede;

padding: 36rpx 0 24rpx;

text-indent: 44rpx;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

.supplierlist-item:last-child{

border-bottom:none;

}

.goodslist .goodslist_item{

background: #fff;

margin-bottom: 20rpx;

}

.goodslist .goodslist_item .goodsinfo{

height: 90rpx;

background: #E9F0F9;

display:-webkit-flex;

display:flex;

display:-moz-box;

display:-webkit-box;

line-height: 90rpx;

padding: 0 70rpx;

box-sizing: border-box;

overflow: hidden;

}

.goodsinfo .name{

font-size: 30rpx;

color: #6A9CE4;

-moz-box-flex:1;

-webkit-box-flex:1;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

.goodsinfo .numtext{

font-size: 28rpx;

color: #666;

padding-left: 76rpx;

display: flex;

flex-direction: row;

}

.goodsinfo .num{

color: #333;

font-weight: 700;

}

.goodslist_item .indentinfo{

padding:16rpx 0;

border-bottom:1rpx solid #dedede;

color: #999;

width: 628rpx;

margin:0 auto;

font-size: 26rpx;

}

.indentinfo .info{

line-height: 58rpx;

text-indent: 10rpx;

}

.goodslist_item .moneyinfo{

padding:0 60rpx 0 70rpx;

display:-webkit-flex;

display:flex;

display:-moz-box;

display:-webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

height: 102rpx;

box-sizing: border-box;

}

.moneyinfo .moneynum{

-moz-box-flex:1;

-webkit-box-flex:1;

color: #333;

font-size: 26rpx;

}

.moneyinfo .option{

padding: 10rpx 24rpx;

font-size: 28rpx;

border-radius: 14rpx;

}

.option.adjust{

border: 1rpx solid #dedede;

color: #666;

}

.option.back{

border: 1rpx solid #E8C062;

background: #E8C062;

color: #fff;

margin-left: 20rpx;

}

.completewra .process{

height: 170rpx;

background: #fff;

margin-bottom: 20rpx;

display:flex;

display:-moz-box;

display:-webkit-box;

-webkit-box-align:center;

padding:0 50rpx;

}

.process .progressbar{

width: 376rpx;

}

.progressbar .title{

color: #333;

font-size: 28rpx;

font-weight: 700;

margin-bottom: 28rpx;

}

.progressbar .barwra{

background:#EAEDEF;

height: 20rpx;

border-radius: 22rpx;

overflow: hidden;

}

.bar{

background: #58B2DC;

border-radius: 22rpx;

}

.process .percentage{

-moz-box-flex:1;

-webkit-box-flex:1;

text-align: right;

}

.percentage .bluenum{

color: #58B2DC;

font-size: 40rpx;

margin-bottom: 10rpx;

}

.percentage .graynum{

color: #666;

font-size: 26rpx;

}

.completewra .goodslist_item .moneying{

color:#F5A623;

font-size: 30rpx;

}

.completewra .goodslist_item .moneyed{

color:#333;

font-size: 30rpx;

}

.completewra .goodslist_item .moneying{

color:#F5A623;

font-size: 30rpx;

}

.completewra .indentinfo .info{

display:flex;

display:-moz-box;

display:-webkit-box;

}

.completewra .indentinfo .info .time{

-moz-box-flex:1;

-webkit-box-flex:1;

}

.completewra .indentinfo .info .look{

font-size: 26rpx;

color: #333;

text-decoration: underline;

}

/* 隐藏控件 */

.hidden {

display: none;

text-align: center;

}

4，js文件

data: {

//根据true和false显示相应的布局

plans: true, //采购计划  第一项显示

goods: false, //待发货   隐藏 

completed: false, //已完成  隐藏

...}

给每个tab添加点击事件。把相应的值变true，其他的赋值false即可。也可以使用一个参数。赋值相应的123即可。