小程序?qū)崿F(xiàn)多列選擇器
本文實例為大家分享了小程序?qū)崿F(xiàn)多列選擇器的具體代碼,供大家參考,具體內(nèi)容如下
代碼分兩部分,先上wxml
<view class="container"> <form catchsubmit="formSubmit"> <view class="form-card"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">物種<span>*</span></view> </view> <view class="weui-cell__bd"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="weui-input">{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}</view> </picker> </view> </view> </view> </form> </view>
其次是js
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { objectMultiShow: [], objectMultiArray: [], multiArray: [], multiIndex: [], checkeIndex: [] }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 * objectMultiShow--匹配多列選擇器渲染數(shù)據(jù)所對應(yīng)的json數(shù)據(jù)(包含id,parentId,name) * multiArray--多列選擇器渲染數(shù)據(jù) */ onLoad: function (options) { // 初始化 let data = { objectMultiShow: this.data.objectMultiShow, objectMultiArray: this.data.objectMultiArray, multiArray: this.data.multiArray, multiIndex: this.data.multiIndex, checkeIndex: this.data.checkeIndex } data.objectMultiArray = [ [{ id: 0, name: '無脊柱動物' }, { id: 1, name: '脊柱動物' }], [ { id: 0, name: '扁性動物', parentId: 0 }, { id: 1, name: '線形動物', parentId: 0 }, { id: 2, name: '環(huán)節(jié)動物', parentId: 0 }, { id: 3, name: '軟體動物', parentId: 0 }, { id: 4, name: '節(jié)肢動物', parentId: 0 }, { id: 5, name: '魚', parentId: 1 }, { id: 6, name: '兩棲動物', parentId: 1 }, { id: 7, name: '爬行動物', parentId: 1 } ], [ { id: 0, name: '豬肉絳蟲', parentId: 0 }, { id: 1, name: '吸血蟲', parentId: 0 }, { id: 2, name: '蛔蟲', parentId: 1 }, { id: 3, name: '螞蟻', parentId: 2 }, { id: 4, name: '螞蟥', parentId: 2 }, { id: 5, name: '河蚌', parentId: 3 }, { id: 6, name: '蝸牛', parentId: 3 }, { id: 7, name: '蛞蝓', parentId: 3 }, { id: 8, name: '昆蟲', parentId: 4 }, { id: 9, name: '甲殼動物', parentId: 4 }, { id: 10, name: '蛛形動物', parentId: 4 }, { id: 11, name: '多足動物', parentId: 4 }, { id: 3, name: '鯽魚', parentId: 5 }, { id: 4, name: '帶魚', parentId: 5 }, { id: 3, name: '青蛙', parentId: 6 }, { id: 4, name: '娃娃魚', parentId: 6 }, { id: 3, name: '蜥蜴', parentId: 7 }, { id: 4, name: '龜', parentId: 7 }, { id: 4, name: '壁虎', parentId: 7 }, ] ] data.objectMultiShow = data.objectMultiArray.map((item, index) => { if (index > 0) { item = item.filter(i => i.parentId === data.objectMultiArray[index - 1][0].id) } return item }) data.multiArray = data.objectMultiShow.map(item => { item = item.map(i => i.name) return item }) console.log(data.multiIndex) // 數(shù)據(jù)更新 this.setData(data) }, bindMultiPickerChange: function (e) { console.log('picker發(fā)送選擇改變,攜帶值為', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { console.log('修改的列為', e.detail.column, ',值為', e.detail.value); // 初始化數(shù)據(jù) var data = { objectMultiShow: this.data.objectMultiShow, multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; // 改變第i列數(shù)據(jù)之后,后幾列選擇第0個選項(重置) data.multiIndex[e.detail.column] = e.detail.value; for (let i = e.detail.column; i < data.multiIndex.length - 1; i++) { data.multiIndex[i + 1] = 0 } /** * 改變第i列數(shù)據(jù)之后,后幾列數(shù)據(jù)更新 * 兩種寫法:for 和 switch,switch為三列選擇器寫法,for由switch精簡拓展過來,可用于多列選擇器 * swich寫法:如果更改的是第一列數(shù)據(jù),第二列數(shù)據(jù)通過filter篩選(parentId = 第一列選中項id),同時更新第三列數(shù)據(jù) * 如果更改的是第二列數(shù)據(jù),更新第三列數(shù)據(jù) 通過filter篩選(parentId = 第二列選中項id) */ let arry = this.data.objectMultiArray for (let i = e.detail.column; i < data.multiIndex.length - 1; i++) { data.objectMultiShow[i + 1] = arry[i + 1].filter(item => item.parentId === data.objectMultiShow[i][data.multiIndex[i]].id) data.multiArray[i + 1] = data.objectMultiShow[i + 1].map(item => item.name) } /*switch (e.detail.column) { case 0: data.objectMultiShow[1] = arry[1].filter(item => item.parentId === data.objectMultiShow[0][data.multiIndex[0]].id) data.multiArray[1] = data.objectMultiShow[1].map(item => item.name) data.objectMultiShow[2] = arry[2].filter(item => item.parentId === data.objectMultiShow[1][data.multiIndex[1]].id) data.multiArray[2] = data.objectMultiShow[2].map(item => item.name) break; case 1: data.objectMultiShow[2] = arry[2].filter(item => item.parentId === data.objectMultiShow[1][data.multiIndex[1]].id) data.multiArray[2] = data.objectMultiShow[2].map(item => item.name) }*/ // 數(shù)據(jù)更新 this.setData(data); } })
wxml部分選用的官方組件--picker,根據(jù)官方文檔mode=multiSelector,表示使用多列選擇器。
其他參數(shù)容我吐槽下:首先是range--綁定的二維數(shù)據(jù),只能是字符串組成的二維數(shù)組,比如[["a","b"], ["c","d"]],這樣的話多列選擇器就是第一列a,b選項,第二列c,d選項。感覺很美。然而事實上這能干啥捏?我們做的多列選擇器并不是只是頁面展示,要跟后臺對接數(shù)據(jù)的,就這樣傳字符串合適否?我需要的是帶id之類的對象,而wxml頁面又不支持雙括號綁定數(shù)據(jù)里寫map之類的函數(shù)方法。所以,我們后臺傳過來的數(shù)據(jù)要改造一下,提取其中的name為綁定數(shù)據(jù)。
第二個就是value,本來以為這個是對應(yīng)項中的第幾個是這樣的:a如果對應(yīng)c,b如果對應(yīng)d。選擇bd應(yīng)該就是[1, 1],而事實上是[1, 0]。也就是對應(yīng)頁面上展示的第幾個對應(yīng)(bd,頁面上第一列有ab兩個選項,第二列有且只有一個d)
其他關(guān)于bindchange綁定的方法是點擊確認(rèn)按鈕觸發(fā),bindcolumnchange綁定的方法是滑動多列選擇器時候觸發(fā),至于bindcancel綁定感覺就是笑話,數(shù)據(jù)實時改變,取消需要再綁定一個中間值才能達到該有的效果,這里暫時沒有做。
js部分我使用了五個數(shù)據(jù)
- objectMultiShow: [] 選中帶id的Object對象數(shù)組
- objectMultiArray: [] 后臺帶id,parentId對象數(shù)組
- multiArray: [] 微信小程序組件需求的字符串二維數(shù)組
- multiIndex: [] 微信小程序組件需求的選中對象數(shù)組
- checkeIndex: [] 基于bindcancel的中間值(暫時未做)
為了達到我想到的真正的多列效果,我不惜出賣肉體,跟后臺大哥達成的各種屈辱協(xié)議,獲得了想要的數(shù)據(jù)格式第一列數(shù)組不帶parentId,因為沒有parent。第二列parentId對應(yīng)第一列id,第三列parentId對應(yīng)第二列id,如果還有多,可以依次類推。然后根據(jù)需求,依次從中獲取所需的其他數(shù)據(jù),完成數(shù)據(jù)初始化。
然后在滑動多列選擇器的時候,動態(tài)更新后一列的數(shù)據(jù),我這里做的處理是更新后一列數(shù)據(jù),并默認(rèn)選擇第一個選項。
詳細注釋寫完,發(fā)現(xiàn)更多的是配置代碼,具體的功能代碼反而很少。
個人感覺,小程序不是寫代碼,而是在配置選項搭建出來的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法
這篇文章主要介紹了JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02JavaScript中英文字符長度統(tǒng)計方法示例【按照中文占2個字符】
這篇文章主要介紹了JavaScript中英文字符長度統(tǒng)計方法,涉及javascript針對中英文字符的匹配與運算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01javascript中節(jié)點的最近的相關(guān)節(jié)點訪問方法
parentNode——父節(jié)點;firstChild——第一個子節(jié)點;lastChild——最后一個子節(jié)點;previousSibling——緊挨著的前面的兄弟節(jié)點;這樣就可以作短途旅行,訪問當(dāng)前節(jié)點的某些相關(guān)節(jié)點,感興趣的你可以參考下哈2013-03-03JavaScript 判斷指定字符串是否為有效數(shù)字
最近在做一個ColdFusion的項目,有一個業(yè)務(wù)Check,需要用JavaScript實現(xiàn):判斷指定字符串是否為有效數(shù)字。2010-05-05