53、订单查询页面(参考商品列表页面的引入tabs组件)
历史订单查询接口文档
订单查询 业务逻辑
1 标题
2 订单查询引入tabs组件
pages\goods_list\index.json——>pages\order\index.json
{
"usingComponents": {
// 引入tabs组件
"Tabs":"../../components/Tabs/Tabs"
},
"navigationBarTitleText": "订单查询"
}
商品列表js的标题数据data:{tabs}
pages\goods_list\index.js
tabs:[
{
id: 0,
value:"综合",
isActive: true
},
{
id: 1,
value:"销量",
isActive: false
},
{
id: 2,
value:"价格",
isActive: false
},
],
pages\goods_list\index.js——>pages\order\index.js
// 页面的初始数据
data: {
tabs:[
{
id: 0,
value:"全部",
isActive: true
},
{
id: 1,
value:"待付款",
isActive: false
},
{
id: 2,
value:"代发货",
isActive: false
},
{
id: 3,
value:"退款/退货",
isActive: false
}
]
},
传入组件中
pages\goods_list\index.wxml——>pages\order\index.wxml
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">内容</Tabs>
定义 handleTabsItemChange 事件
pages\goods_list\index.js——>pages\order\index.js
与data:{}同层级
handleTabsItemChange(e){
console.log(e);
// 1 获取被点击的标题索引
const {index}=e.detail;
// 2 修改源数组
let {tabs}=this.data;
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
// 3 赋值到data中
this.setData({
tabs
})
},