微信官方的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();
},
總結完了發現好像也沒啥用 哈哈 也只是把微信小程序的沒寫的給寫出來了 反正人家也支持。