53. Order query page (refer to the tabs component of the product list page)
Historical order query interface document
Order query business logic
1 Title
2 Order query introduced tabs component
pages\goods_list\index.json——>pages\order\index.json
{
"usingComponents": {
// 引入tabs组件
"Tabs":"../../components/Tabs/Tabs"
},
"navigationBarTitleText": "订单查询"
}
Title data data of product list js: {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
}
]
},
Incoming in the components
pages\goods_list\index.wxml——>pages\order\index.wxml
<Tabs tabs="{
{tabs}}" bindtabsItemChange="handleTabsItemChange">内容</Tabs>
Define handleTabsItemChange event
pages\goods_list\index.js——>pages\order\index.js
and data: {} the same level
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
})
},
