微信小程序picket綁定數組對象

微信官方的picket只寫了那些數組裏面就是逐條信息的類型,但是沒有裏面綁定的是對象的類型,所以發佈一個,希望有用的可以拿走

單列表

首先是js

第一個是數據內容如此

    productList: [
      {
        id: '1',
        name: '全部產品'
      },
      {
        id: '2',
        name: 'B2C付款'
      },
      {
        id: '3',
        name: 'B2B付款'
      },
      {
        id: '4',
        name: 'B2C收銀臺'
      },
      {
        id: '5',
        name: '標商收銀臺'
      },
      {
        id: '6',
        name: '獨立報關'
      },
    ],
    productIndex:0, // 下標

然後是頁面

    <picker mode="selector" bindchange="bindProductChange" range="{{productList}}" value="{{productIndex}}" range-key="{{'name'}}"> 
        <view class="weui-cell-check-type">
            {{productList[productIndex].name}}
        </view>
    </picker>

最後是js變更

    /**
   * 下拉框變更
   */
  bindProductChange:function(e){
    this.setData({
      productIndex: e.detail.value
    });
    this.queryShopsData();
  },

雙列表

首先依舊是數據內容

    platformAndSiteList:[
      [
        {
          id: "",
          name: '全部平臺'
        },
        {
          id: "AMAZON",
          name: '亞馬遜'
        },
        {
          id: "EBAY",
          name: 'EBAY'
        },
        {
          id: "WISH",
          name: 'WISH'
        },
        {
          id: "YAHOO",
          name: 'YAHOO'
        },
        {
          id: "OTHER",
          name: '其他'
        }
      ],
      [
        {
          id: "",
          name: '全部站點'
        },
        {
          id: "1",
          name: '北美站'
        },
        {
          id: "4",
          name: '日本站'
        },
        {
          id: "2",
          name: '歐洲站'
        },
        {
          id: "3",
          name: '英國站'
        }
      ],
    ],
    platformAndSiteIndex:[0,0], // 平臺及站點下標

然後是頁面

<picker mode="multiSelector" bindchange="bindPlatformChange" value="{{platformAndSiteIndex}}" range="{{platformAndSiteList}}" range-key="{{'name'}}"> 
    <view class="weui-cell-check-type">
        {{platformAndSiteList[0][platformAndSiteIndex[0]].name}}{{platformAndSiteList[1][platformAndSiteIndex[1]].name}}
    </view>
</picker>

最後是下拉框變更

    /**
   * 修改平臺類別
   */
  bindPlatformChange: function(e){
    this.setData({
      platformAndSiteIndex: e.detail.value
    });
    this.queryShopsData();
  },

總結完了發現好像也沒啥用  哈哈  也只是把微信小程序的沒寫的給寫出來了 反正人家也支持。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章