微信官方的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();
},
总结完了发现好像也没啥用 哈哈 也只是把微信小程序的没写的给写出来了 反正人家也支持。