小程式 單列和多列picker選擇器(一)

2021-09-26 16:38:37 字數 920 閱讀 6079

未選擇時:

選擇後:(會顯示選擇的內容)

附xml和js**

xml

}

js:

data:,

bindpickerchangetype: function (e) )

}

先看下這個選擇器的原理,再觸發了繫結事件bindpickerchangetype以後對indextype的值進行了改變,注意此時改變的是value="}"中的值(也就是要做到和value對應,否則會出現儲存錯誤)

處理顯示內容的時候利用三目運算子

}

當然,如果要為未選擇時候的文字設定特殊的樣式也可以用同樣的方法

}

這樣未選擇的時候「快遞型別」就會顯示為灰色

這樣寫在開發者工具中會一直顯示為未選擇狀態,筆者最開始擔心角標存入錯誤的情況,比如說第二列可選擇,第一列仍為未選擇的情況(因為最開始的角標是-1),但是在手機中會使預設選擇的情況

所以不會出現存入為-1的情況

存入值為文字值而不是角標

小程式 單列和多列picker選擇器(二)

在我的另一篇博文中已經提到了要解決的第乙個問題 在未選擇時展示引導內容,在下拉欄選擇後顯示選擇內容 現在來解決第二個問題 存入值為文字值而不是角標 當前選擇 可以看出index是下角標,顯示文字時是以陣列的形式,array 0 array 1 等,所以為了讓資料庫中存入的是文字形式我們可以把這部分內...

小程式 picker 多列選擇器 資料動態獲取

需求是將各校區對應各班級的資料 以兩列選擇器的方式展示出來,並且可以在選擇完成之後記錄選結果引數。校區資料 和 班級資料 分別是兩個介面,以 校區 teach area id 字段關聯 其各班級資料 當前選擇 view picker 校區api資料格式 result 1.首先在onload 中請求校...

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

data 核心 點 選擇pickindexarr作為picker的運算元組源的原因就是,避免family陣列的每次重新賦值。如若我們直接使用family作為picker陣列源,由於picker的值必須是選擇一次,都要重新賦值,那麼family也就需要重新賦值,我必須保證family的所有欄位的輸入變...