微信小程序picket绑定数组对象

分手后的思念是犯贱 2023-06-07 12:19 29阅读 0赞

微信官方的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();
      },

总结完了发现好像也没啥用  哈哈  也只是把微信小程序的没写的给写出来了 反正人家也支持。