WeChat Mini Program Project_Qiu Bo Optimal 57

53.注文クエリページ（製品リストページのタブコンポーネントを参照）

履歴注文クエリインターフェースドキュメント



注文クエリビジネスロジック
1タイトル
2注文クエリは、タブコンポーネント
pages \ goods_list \ index.json-> pages \ order \ index.jsonを導入します

{
    
    
  "usingComponents": {
    
    
  // 引入tabs组件
    "Tabs":"../../components/Tabs/Tabs"
  },
  "navigationBarTitleText": "订单查询"
}

商品リスト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
      }
    ]
  },

コンポーネント
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
    })
  },