微信小程序picker组件_vue用push往数组里增加对象[通俗易懂]

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

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

今天的文章微信小程序picker组件_vue用push往数组里增加对象[通俗易懂]分享到此就结束了，感谢您的阅读。