微信小程序下(xià)拉滾動(dòng)選擇器(qì)picker綁定數據的兩種方式 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序下(xià)拉滾動(dòng)選擇器(qì)picker綁定數據的兩種方式

發表時間:2021-3-31

發布人:葵宇科技

浏覽次數:90

微信小程序下(xià)拉滾動(dòng)選擇器(qì)picker綁定數據的兩種方式 本地數據綁定和(hé)wx.request(OBJECT) json數據綁定

1.本地數據綁定 (對象數組)

Page({
data:{
//戶型 這是一個(gè)本地的對象,然後綁定到頁面上
pic_array: [
{ id: 13, name: '1室1廳1衛' },
{ id: 14, name: '1室2廳1衛' },
{ id: 15, name: '2室1廳1衛' },
{ id: 16, name: '3室1廳2衛' },
{ id: 17, name: '4室1廳2衛' },
{ id: 18, name: '5室1廳3衛' },
{ id: 19, name: '6室1廳3衛' },
{ id: 20, name: '7室以上' },
],
hx_index: 0
},
bindPickerChange_hx: function (e) {
console.log('picker發送選擇改變,攜帶值為', e.detail.value);
this.setData({ //給變量賦值
hx_index: e.detail.value, //每次選擇了下(xià)拉列表的内容同時修改下(xià)标然後修改顯示的内容,顯示的内容和(hé)選擇的内容一緻
})
console.log('自定義值:', this.data.hx_select);
},
})
 
<picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].id}}" data-selecthx="{{pic_array[hx_index].name}}" range="{{pic_array}}" range-key="{{'name'}}" bindchange="bindPickerChange_hx" >
<view class="picker" >
戶型: {{pic_array[hx_index].name}} //指定數組中(zhōng)指定下(xià)标的name鍵對應的值
view>
picker>
屬性名range 類型Array/Object Array 存放你(nǐ)的本地數據數組或者對象數組,需要加載的數據
屬性名range-key 類型String 當 range 是一個(gè) 二維Object Array 時,通(tōng)過 range-key 來指定 Object 中(zhōng) key 的值作為選擇器(qì)顯示内容
屬性名value 類型Array value 每一項的值表示選擇了 range 對應項中(zhōng)的第幾個(gè)(下(xià)标從 0 開始)
屬性名data- 類型自定義屬性後更的屬性名字可(kě)以自定義 當你(nǐ)需要設置其他值得時候可(kě)以使用 可(kě)選

2.網絡請求得到的json數據綁定下(xià)拉選擇器(qì)

首先得到後台傳過來的json數據

data:{
}
onLoad: function () {
var that = this;
wx.request({
url: "https://www.************",
data: {
a: "" //參數
},
header: {
"Content-Type": "applicatiSon/x-www-form-urlencoded"
},
method: "POST",
success: function (res) {
that.setData({
pic_array: res.data.data.exp_hx, //把json數據賦值給變量pic_array_hx
}) } }) }
   //綁定的方式一樣,隻是改動(dòng)一下(xià)變量名既可(kě)以了,這是比較簡單的方式
<picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].id}}" data-selecthx="{{pic_array[hx_index].name}}" range="{{pic_array}}" range-key="{{'name'}}" bindchange="bindPickerChange_hx" >
<view class="picker" >
戶型: {{pic_array[hx_index].name}} //指定數組中(zhōng)指定下(xià)标的name鍵對應的值
view>
picker>


相關(guān)案例查看更多