How to use WeChat Mini Programs picker Multi-column Selector
This article mainly explains "how to use WeChat Mini Programs picker multi-column selector". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to use WeChat Mini Programs picker multi-column selector.
Vue-next-admin, which is a backend open source free template library based on vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex, adapted to mobile phones, tablets and pc.
First, the effect picture (multi-column)
Second, ordinary selector: mode = selector, multi-column selector: mode = multiSelector
Document address: Wechat development document picker selector
Ordinary selector: mode = selector, one-dimensional array: array: ["United States", "China", "Brazil", "Japan"]
Multi-column selector: mode = multiSelector, two-dimensional array: multiArray: [["Spinal animal", "Spinal animal"], ["oblate animal", "linear animal", "annelid", "mollusk", "arthropod"], ["pork tapeworm", "bloodsucking worm"]]
If the format is incorrect, it should be processed into the corresponding array format, occupying the pit chart:
3. App.json {"pages": ["pages/index/index", "pages/logs/logs", "pages/picker/picker"], "entryPagePath": "pages/picker/picker", "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle": "black"}, "sitemapLocation": "sitemap.json" "usingComponents": {"van-button": "@ vant/weapp/button/index", "van-area": "@ vant/weapp/area/index"} 4. Picker.wxml multi-column selector current selection: {{newArr [0] [multiIndex [0]]}} {{newArr [1] [multiIndex [1]]}}, {{newArr [2] [multiIndex [2]]}} V. Picker.js
Multi-column selector: mode = multiSelector
Note that the array format: multiArray array has children, to deal with two-dimensional array:
/ / pages/picker/picker.jsPage (initial data of {/ * page * / data: {multiArray: [{id: 1, label: "Southeast", children: [{id: 2, label: "Shanghai", children: [{id: 3 Label: "Putuo",}, {id: 4, label: "Huangpu",}, {id: 5, label: "Xuhui",},],} {id: 7, label: "Jiangsu", children: [{id: 8, label: "Nanjing",}, {id: 9, label: "Suzhou",} {id: 10, label: "Wuxi",},],}, {id: 12, label: "Zhejiang", children: [{id: 13, label: "Hangzhou" }, {id: 14, label: "Ningbo",}, {id: 15, label: "Jiaxing",},],},} {id: 17, label: "Northwest", children: [{id: 18, label: "Shaanxi", children: [{id: 19, label: "Xi'an",}, {id: 20 Label: Yan'an,},],}, {id: 21, label: "Xinjiang Uygur Autonomous region", children: [{id: 22, label: "Urumqi",} {id: 23, label: "Karamay",},],},],], multiIndex: [0,0,0], multiIds: [], newArr: [],}, bindMultiPickerChange (e) {console.log (this.data.multiIds) }, bindMultiPickerColumnChange (e) {let data = {newArr: this.data.newArr, multiIndex: this.data.multiIndex, multiIds: this.data.multiIds,}; data.multiIndex [e.detail.column] = e.detail.value; let searchColumn = () = > {let arr1 = []; let arr2 = [] This.data.multiArray.map ((v, vk) = > {if (data.multiIndex [0] = vk) {data.multiIds [0] = {... v,}; v.children.map ((c, ck) = > {arr1.push (c.label)) If (data.multiIndex [1] = ck) {data.multiIds [1] = {... c,}; c.children.map ((t, vt) = > {arr2.push (t.label)) If (data.multiIndex [2] = vt) {data.multiIds [2] = {... t,}}); data.newArr [1] = arr1 Data.newArr [2] = arr2;}; switch (e.detail.column) {case 0: / / each switch restore initial value data.multiIndex [1] = 0; data.multiIndex [2] = 0; / / execute function processing searchColumn (); break; case 1: data.multiIndex [2] = 0; searchColumn () Break;} this.setData (data) }, / * Life cycle function-- listen to page load * / onLoad: function (options) {let state = {arr: [], arr1: [], arr2: [], arr3: [], multiIds: []} this.data.multiArray.map ((v, vk) = > {state.arr1.push (v.label)) If (this.data.multiIndex [0] = vk) {state.multiIds [0] = v;} if (state.arr2.length {state.arr2.push (c.label); if (this.data.multiIndex [1] = ck) {state.multiIds [1] = c } if (state.arr3.length {state.arr3.push (t.label); if (this.data.multiIndex [2] = tk) {state.multiIds [2] = t;});}});}}); state.arr [0] = state.arr1 State.arr [1] = state.arr2; state.arr [2] = state.arr3; this.setData ({newArr: state.arr, multiIds: state.multiIds,}) }, / * Lifecycle function-first rendering of listening page completed * / onReady: function () {}, / * Lifecycle function-listening Page display * / onShow: function () {}, / * Lifecycle function-listening Page Hidden * / onHide: function () {} / * Lifecycle function-listens to page unload * / onUnload: function () {}, / * page related event handler-listens to user drop-down action * / onPullDownRefresh: function () {}, / * Handler function for pull-down event on page * / onReachBottom: function () {} / * users click on the upper right corner to share * / onShareAppMessage: function () {},}) At this point, I believe you have a deeper understanding of "how to use WeChat Mini Programs picker multi-column selector". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
