摘要:幾個主要屬性選取范圍,數據類型為,為普通選擇器時,有效的值表示選擇了中的第幾個下標從開始,數據類型肯定是綁定事件,改變時觸發事件,。代碼如下選項一選項二選項三一二三四五這樣,一個頁面使用多個的問題就解決了。但在發現小一個問題。
一、picker基本概念
當然先看官方文檔 picker說明搞清楚基本概念
“從底部彈起的滾動選擇器,現支持三種選擇器,通過mode來區分,分別是普通選擇器,時間選擇器,日期選擇器,默認是普通選擇器。”
幾個主要屬性:
range: 選取范圍,數據類型為Array / Object Array,mode為 普通選擇器 時,range 有效;
value: value 的值表示選擇了 range 中的第幾個(下標從 0 開始),數據類型肯定是Number;
bindchange: 綁定事件,value 改變時觸發 change 事件,event.detail = {value: value}。
今天在同一個頁面使用多個普通選擇器遇到了問題,選擇一個選項,其他選項也跟隨著改變了.
代碼如下:
//picker.wxml:選項一 {{option1[index]}} 選項二 {{option2[index]}} //picker.js Page({ data: { index:0,//設置索引值默認為0 option1: ["1", "2", "3","4","5"], option2: ["一", "二", "三","四","五"], option3: ["①", "②", "③","④","⑤"], }, bindchange1:function (e) { // console.log("picker發送選擇改變,攜帶值為", e.detail.value) // 設置這個攜帶值賦值給索引值index // 所以option1 ,option2 ,option3的索引值都是一樣的 this.setData({ index: e.detail.value }) } }) 選項三 {{option3[index]}}
因為默認索引值(也叫“下標”)都是index,綁定事件也只是改變了index。所以改變一個選項,其他選項都跟著改變了。
三、怎么解決呢?首先想到的是給三個選項自定義不同的索引值index1,index2,index3,分別綁定不同的事件bindchange1,bindchange2,bindchange3改變其對應的索引值,互不干擾。
代碼如下:
//picker.wxml:選項一 {{option1[index1]}} 選項二 {{option2[index2]}} // picker.js Page({ data: { index1:0, index2:0, index3:0, option1: ["1", "2", "3","4","5"], option2: ["一", "二", "三","四","五"], option3: ["①", "②", "③","④","⑤"], }, bindchange1:function (e) { this.setData({ index1: e.detail.value }) }, bindchange2:function (e) { this.setData({ index2: e.detail.value }) }, bindchange3:function (e) { this.setData({ index3: e.detail.value }) } }) 選項三 {{option3[index3]}}
這樣,一個頁面使用多個picker的問題就解決了。但在發現小一個問題。
搜索到jiong也提出了這個問題:
“為什么多個picker會出現相互影響的問題?比如在第一個選擇器選擇了3,剩下的選擇器點進去默認都是從第3個開始?”
小程序開發工具(PC端)中的確存在,也沒有好的解決辦法。
但是,我用手機親測不存在這個問題。新版小程序開發工具已經修復此Bug
在這里我多次使用了picker,于是我想到了使用循環 wx:for,(以后如果還要用可以做成一個模板)
那么數據就要修改為對象的數組(Object Array) ,我理解為json格式(不知道對不對)
// picker.js Page({ data: { //每個對象就是一個選擇器,有自己的索引值index,標題title,選項option(又是一個數組) objArray:[ { index:0, title:"選項一", option: ["1", "2", "3","4","5"], }, { index:0, title:"選項二", option: ["一", "二", "三","四","五"], }, { index:0, title:"選項三", option: ["①", "②", "③","④","⑤"] }, ] }, // 綁定事件,因為不能用this.setData直接設置每個對象的索引值index。 // 所以用自定義屬性current來標記每個數組對象的下標 bindChange_select: function(ev) { // 定義一個變量curindex 儲存觸發事件的數組對象的下標 const curindex = ev.target.dataset.current // 根據下標 改變該數組對象中的index值 this.data.objArray[curindex].index = ev.detail.value // 把改變某個數組對象index值之后的全新objArray重新 賦值給objArray this.setData({ objArray: this.data.objArray }) } })picker.wxml
wx:for綁定數組objArray,當前項的下標變量名默認為index,數組當前項的變量名默認為item,為了區分選項option中的下標
使用 wx:for-item 可以指定數組當前元素的變量名為itm,
使用 wx:for-index 可以指定數組當前下標的變量名為idx
關鍵點是:自定義一個屬性對應當前下標 data-current="{{idx}}",綁定事件bindChange_select觸發時判斷出是哪個數組對象觸發的,就改變該數組對象中的index值
//picker.wxml:{{itm.title}} {{itm.option[itm.index]}}
完整案例
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83477.html
摘要:最近一直在搞小程序,由于剛需一個拾色器,搜了半天也沒見人做過,就自己動手擼了一個,還在不斷地改進優化中。。。 最近一直在搞小程序,由于剛需一個拾色器,搜了半天也沒見人做過,就自己動手擼了一個,還在不斷地改進優化中。。。 項目地址 https://github.com/KirisakiAr... 查看DEMO showImg(https://i.loli.net/2019/01/02/...
摘要:最近剛使用完成了微信小程序的開發,寫點東西,做個記錄。專門用于外鏈跳轉但是外鏈跳轉還是個坑,微信僅能支持跳到在它那邊注冊過的的網址,其他還是不行,暫時沒有找到好的方式看了知乎,它的外鏈直接轉成了文本,不可點擊了。 最近剛使用mpvue完成了微信小程序的開發,寫點東西,做個記錄。 首先依舊是兩個傳送門: 微信小程序文檔:[https://developers.weixin.qq.com/...
摘要:最近剛使用完成了微信小程序的開發,寫點東西,做個記錄。專門用于外鏈跳轉但是外鏈跳轉還是個坑,微信僅能支持跳到在它那邊注冊過的的網址,其他還是不行,暫時沒有找到好的方式看了知乎,它的外鏈直接轉成了文本,不可點擊了。 最近剛使用mpvue完成了微信小程序的開發,寫點東西,做個記錄。 首先依舊是兩個傳送門: 微信小程序文檔:[https://developers.weixin.qq.com/...
摘要:最近剛使用完成了微信小程序的開發,寫點東西,做個記錄。專門用于外鏈跳轉但是外鏈跳轉還是個坑,微信僅能支持跳到在它那邊注冊過的的網址,其他還是不行,暫時沒有找到好的方式看了知乎,它的外鏈直接轉成了文本,不可點擊了。 最近剛使用mpvue完成了微信小程序的開發,寫點東西,做個記錄。 首先依舊是兩個傳送門: 微信小程序文檔:[https://developers.weixin.qq.com/...
閱讀 1582·2021-09-02 15:41
閱讀 993·2021-09-02 15:11
閱讀 1274·2021-07-28 00:15
閱讀 2296·2019-08-30 15:55
閱讀 1137·2019-08-30 15:54
閱讀 1686·2019-08-30 15:54
閱讀 2967·2019-08-30 14:02
閱讀 2518·2019-08-29 16:57