微信小程式 picker 單項單列選擇的實現

2021-09-01 11:17:15 字數 1779 閱讀 8638

data: ,
核心**點：選擇pickindexarr作為picker的運算元組源的原因就是，避免family陣列的每次重新賦值。如若我們直接使用family作為picker陣列源，由於picker的值必須是選擇一次，都要重新賦值，那麼family也就需要重新賦值，我必須保證family的所有欄位的輸入變化都要同步到family陣列之上，那麼我們的處理將不再是這幾個使用picker的字段了，而是所有欄位都需要處理，因此非常麻煩。我們借用中間陣列源pickindexarr的話只需要處理使用picker 的字段即可，只要我們儲存的時候同步到family即可，其他模板輸入變化不需要同步family。pickindexarr滿足條件：儲存著和family(二維陣列)一一對應

pickindexarr具體的項對應family裡面列舉型別的項

pickindexarr 頁面初始化的時候以及選擇的時候，都保持一致

pickindexarr和family的資料結構：

請求伺服器的資料初始化pickindexarr，family

onload: function (options) );


wx.request(,


header: ,


success: function (res) ;


pickindexobg['family_relation'] = familydata[i].family_relation;


pickindexobg['family_health'] = familydata[i].family_health;


pickindexobg['family_type'] = familydata[i].family_type;


pickindexobg['family_degree'] = familydata[i].family_degree;


pickindexobg['family_labour'] = familydata[i].family_labour;


pickindexarr.push(pickindexobg);


}that.setdata();}})


},
模板頁面中渲染，初始化選擇列表

與戶主關係


}健康狀況


}婚姻狀況


}就學情況


}是否有勞動力


}
bindpickerchange 選擇具體的項，重新賦值pickindexarr

bindpickerchange: function (e) 


switch (family_field)


this.setdata()


},
到此為止，跟伺服器資料相關聯的picker就可以正常使用了

微信小程式 picker

本文章主要解釋乙個mode為selector，平常比較常用的一些固定的選擇，我們平常就這樣子寫了，picker bindchange bindcaspickerchangestatusemployee value range name employeestatus text 在職資訊 text te...

小程式picker標題 微信小程式之picker

下面來介紹小picker，分三種樣式 預設的自己可以定義資料的 mode time 是時間選擇器 mode date 是日期選擇器 跟其他的一樣先來看下picker.wxml picker 選擇器地區選擇器 當前選擇 時間選擇器 當前選擇 日期選擇器 當前選擇 picker.wxss page ba...

微信小程式自定義picker

使用姿勢 獲取 尾巴之前ui丟了一張類似這樣的效果圖 當然這個是本文的效果圖，不是原圖，不過差不多 給我 當時看到圖就想這個還不簡單，直接使用picker就行了。然後就是一頓操作，選擇mode為date，最終出現了效果圖 正當我沉浸在完成功能的喜悅中的時候，心裡有個聲音一直在提醒我 你沒有達到ui需...