小程序的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.number>1?'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即可。
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
