峰文鄉(xiāng)小程序之picker 數(shù)據(jù)是 Object Array
閱讀 29457 · 發(fā)布日期 2020-08-24 17:26 · 溫州優(yōu)光網(wǎng)絡(luò)科技有限公司|建站|APP小程序制作|做網(wǎng)站SEO推廣優(yōu)化
【摘要】
我們?cè)诓僮?picker 組件的時(shí)候 可能會(huì)有疑惑,為什么會(huì)出現(xiàn)渲染問(wèn)題,或者我就是想取中文的值,怎么辦?視圖層數(shù)據(jù)是json的,直接展示
picker使用說(shuō)明:{{school}}'
model:value="{{currentSchool}}"
bindchange="handleChange"... 【溫州小程序開(kāi)發(fā),溫州微信公眾號(hào),平陽(yáng)做網(wǎng)站,平陽(yáng)網(wǎng)站建設(shè)公司,平陽(yáng)小程序商城制作,昆陽(yáng)萬(wàn)全做網(wǎng)站,鰲江水頭小程序,蕭江騰蛟微信公眾號(hào),山門順溪南雁海西南麂鳳臥麻步懷溪網(wǎng)絡(luò)網(wǎng)店服務(wù),政采云網(wǎng)店管理服務(wù)】...
我們?cè)诓僮?picker 組件的時(shí)候 可能會(huì)有疑惑,為什么會(huì)出現(xiàn)渲染問(wèn)題,或者我就是想取中文的值,怎么辦?視圖層
{
school}
}
'
model:value="{
{
currentSchool}
}
" bindchange="handleChange" > 當(dāng)前選擇 {
{
school[currentSchool].valuess}
}
data: {
school: [ {
"isNewRecord":false,"id":"2","keyss":"school","valuess":"湖南小學(xué)"}
, {
"isNewRecord":false,"id":"3","keyss":"school","valuess":"北京小學(xué)"}
], currentSchool: "" }
handleChange(e) {
console.log(e) // 如果 range是一個(gè) Object Array形式的,那這里的value就是索引下標(biāo) let currentVal = e.detail.value // 對(duì)應(yīng)的中文是 let text = this.data.school[currentVal].valuess console.log('
中文-->'
, text) }
, }
)這里,我們傳入的是一個(gè)數(shù)組對(duì)象 Object Array類型, 那么我們?cè)谑褂胮icker組件的時(shí)候,一定要分清,這些字段的意思,以及如何取值range-key 是告訴我們,在渲染的時(shí)候,是以什么字段取值,下面就是不指定的情況,如果是很簡(jiǎn)單的數(shù)據(jù)結(jié)構(gòu)類似:
school: ["中文", '
數(shù)學(xué)'
, "音樂(lè)"]是不需要指定的,對(duì)于復(fù)雜的數(shù)據(jù)結(jié)構(gòu),指定字段,微信會(huì)自動(dòng)幫我們?nèi)ベx值作者:
知了清語(yǔ)model:value="{
{
currentSchool}
}
" 你可能會(huì)發(fā)現(xiàn)這個(gè),為什么value前面綁定了model因?yàn)槲⑿挪皇请p向數(shù)據(jù)綁定的,如果單純的寫 value="{
{
當(dāng)前選中的索引下標(biāo)-currentSchool}
}
"邏輯層的currentSchool 是不會(huì)有變化的,必須通過(guò) bindchange事件去修改 data中的數(shù)據(jù), 像下面這樣handleChange(e) {
this.setData({
currentSchool: e.detail.value }
) }
使用model的好處 就在于 我們不需要關(guān)系這個(gè)賦值操作,只要我們點(diǎn)擊右上角的確定,data中的 currentSchool就更新了,點(diǎn)擊取消是不會(huì)更新data中的數(shù)據(jù)的我們?cè)?handleChange中的 e.detail.value 拿到的值也就是個(gè)下標(biāo),其實(shí)我們可能會(huì)想要text文本就直接像上面那樣,用索引去取源數(shù)據(jù)中的 {
}
對(duì)象屬性還有一種常見(jiàn)的操作,就是將 school--schoolFilter變成 ["湖南小學(xué)", "北京小學(xué)"] 這種簡(jiǎn)單結(jié)構(gòu),那么e.detail.value 獲取的就是中文但是這種要求,data中有2個(gè)數(shù)組 schoolFilter--Array類型的 和school--Object Array類型的, picker中用 range = "{
{
schoolFilter}
}
"那么要獲取源數(shù)據(jù)的其他屬性,就必須遍歷school 再取值總結(jié)不想去寫bindchange更改 data數(shù)據(jù),就使用 model:picker 開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽 中包裹只是選擇以后的內(nèi)容,你可以隨意去組織用 text呈現(xiàn)或者 {
{
內(nèi)容}
}
呈現(xiàn) 或者 view 呈現(xiàn) 或者 input 呈現(xiàn) 都可以獲取Object Array中的其他字段,如果不想過(guò)濾數(shù)據(jù),就使用 Object Array這種結(jié)構(gòu),就通過(guò)索引下班去訪問(wèn),不需要在data中建2個(gè)字段只有點(diǎn)擊 picker中顯示的 【確定】按鈕,picker中的數(shù)據(jù)才會(huì)更新推薦教程:
《微信小程序》以上就是小程序之picker 數(shù)據(jù)是 Object Array的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
微信
分享相關(guān)標(biāo)簽:
微信小程序本文轉(zhuǎn)載于:
掘金社區(qū),如有侵犯,請(qǐng)聯(lián)系[email protected]刪除
上一篇:
一款小而美小程序腳手架,讓你更流暢快速的開(kāi)發(fā)小程序
下一篇:
小程序入門就看這篇相關(guān)文章相關(guān)視頻微信小程序圖片無(wú)法顯示怎么辦?自學(xué)微信小程序從零到一:
項(xiàng)目構(gòu)建后http請(qǐng)求封裝微信小程序-canvas生成圖片并保存到本地怎么退出微信小程序的登錄?小程序之picker 數(shù)據(jù)是 Object Arr...初識(shí)微信小程序(1)初識(shí)微信小程序(4)深入了解微信小程序(三) [溫州做小程序]
為您推薦
- 百度智能小程序SWAN 視圖基礎(chǔ)數(shù)據(jù)綁定怎么做 2020-08-24
- 百度智能小程序SWAN 視圖是什么? 2020-08-24
- 百度智能小程序啟動(dòng)頁(yè)面的代碼如何設(shè)置 2020-08-24
- 百度智能小程序SWAN 生命周期是什么 2020-08-24
- 百度智能小程序如何配置全局?jǐn)?shù)據(jù) 2020-08-24
- 百度智能小程序?window、tabBar如何優(yōu)化和調(diào)整 2020-08-24
- 百度智能小程序?pages是什么 2020-08-24
- 百度智能小程序配置界面、路徑如何優(yōu)化 2020-08-24