一、小程序中如果制作tab选项卡切换
思路:给每个tab都绑定了同一个方法,并且给每个tab都绑定不同的data-type值,当点击当前的tab,就获取当前tab的data-type值,并且赋值给dataType变量储存起来。这样就实现了点击效果
*******这里判断状态值的时候用到了三元运算符:
如名字表示的三元运算符需要三个操作数。语法为:条件表达式?表达式1:表达式2。说明:问号前面的位置是判断的条件,判断结果为bool型,为true时调用表达式1,为false时调用表达式2。其逻辑为:“如果条件表达式成立或者满足则执行表达式1,否则执行第二个。”常用在设置默认值,例如某个值不一定存在,则判断这个值是否存在,不存在给默认值(表达式2)。
(1) 在myorder.wxml页面中
<view class="toptab">
<view class="btn1" bindtap="bindHeaderTap" class="{
{dataType==='100'?'active':''}}" data-type="100">全部</view>
<view class="btn2" bindtap="bindHeaderTap" class="{
{dataType==='2'?'active':''}}" data-type="2">待支付</view>
<view class="btn3" bindtap="bindHeaderTap" class="{
{dataType==='0'?'active':''}}" data-type="0">已支付</view>
<view class="btn4" bindtap="bindHeaderTap" class="{
{dataType==='3'?'active':''}}" data-type="3">退款</view>
</view>
(2)在myorder.js页面
data: {
shownone:false,
dataType:'100', //默认data-type值为100,即选项卡选中第一个
order:[] //订单列表
},
/** * 切换标签 */
bindHeaderTap: function (e) {
this.setData({
dataType: e.target.dataset.type });
console.log('状态值',this.data.dataType);
// 获取订单列表
this.getOrderList(e.target.dataset.type);
},
数据请求写在getOrderList()方法里面:
// 获取订单列表
getOrderList: function (dataType) {
wx.request({
url: '接口地址url',
method: 'GET',
header: {
'content-type': 'application/json' // 默认值
},
data: {
orderXh:xh,
orderStatus:this.data.dataType
},
success: function(res) {
console.log(res.data);
that.setData({
order:res.data.Data
});
console.log(res.data.Data);
}
});
}
//然后在onShow()方法再调用一下这个数据请求方法
onShow: function () {
this.getOrderList(this.data.dataType);
},
(3)myorder.wxss文件
.toptab .active {
color: #fd4a5f;
border-bottom: 2rpx solid #ee2746;
text-align: center;
}
(4)效果图