Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.