微信小程序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();
  },

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值