vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库

一、效果图（多列）

二、普通选择器：mode = selector、多列选择器：mode = multiSelector

文档地址：微信开发文档 picker选择器

普通选择器：mode = selector，一维数组：array: ['美国', '中国', '巴西', '日本']
多列选择器：mode = multiSelector，二维数组：multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']]

格式不对，要处理成对应数组格式，占坑图：

三、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"}
}

四、picker.wxml

<!--pages/picker/picker.wxml-->
<view><view class="section__title">多列选择器</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"value="{{multiIndex}}" range="{{newArr}}"><view class="picker">当前选择： <van-button type="primary">{{newArr[0][multiIndex[0]]}}，{{newArr[1][multiIndex[1]]}}，{{newArr[2][multiIndex[2]]}}</van-button></view></picker>
</view>

五、picker.js

多列选择器：mode = multiSelector

注意看数组格式：multiArray数组 有 children，要处理二维数组：

// pages/picker/picker.js
Page({/*** 页面的初始数据*/data: {multiArray: [{id: 1,label: "东南",children: [{id: 2,label: "上海",children: [{id: 3,label: "普陀",},{id: 4,label: "黄埔",},{id: 5,label: "徐汇",},],},{id: 7,label: "江苏",children: [{id: 8,label: "南京",},{id: 9,label: "苏州",},{id: 10,label: "无锡",},],},{id: 12,label: "浙江",children: [{id: 13,label: "杭州",},{id: 14,label: "宁波",},{id: 15,label: "嘉兴",},],},],},{id: 17,label: "西北",children: [{id: 18,label: "陕西",children: [{id: 19,label: "西安",},{id: 20,label: "延安",},],},{id: 21,label: "新疆维吾尔族自治区",children: [{id: 22,label: "乌鲁木齐",},{id: 23,label: "克拉玛依",},],},],},],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:// 每次切换还原初始值data.multiIndex[1] = 0;data.multiIndex[2] = 0;// 执行函数处理searchColumn();break;case 1:data.multiIndex[2] = 0;searchColumn();break;}this.setData(data);},/*** 生命周期函数--监听页面加载*/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 <= 0) {v.children.map((c, ck) => {state.arr2.push(c.label);if (this.data.multiIndex[1] === ck) {state.multiIds[1] = c;}if (state.arr3.length <= 0) {c.children.map((t, tk) => {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,});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},
});

微信小程序picker多列选择器：mode = multiSelector相关推荐

微信小程序picker组件实现多列选择器
[微信小程序]picker组件多列选择器的使用功能需求用微信小程序的多列选择器实现对一个树状结构图中的末节点的选择,要求选择器的第一列改变时,后面列的选项会联动改变.树状结构图的部分数据如下图; ...
微信小程序的年月日年月日选择器基于picker的mode = multiSelector
微信小程序的双时间选择器基于picker的mode = multiSelector 废了好大的劲写了这么一个组件,叉会腰~ 其实这段代码并不精炼,不过本人也是个刚工作一年多的小菜鸟,就先放在这里,有想 ...
微信小程序中的省市区选择器
微信小程序中的省市区选择器的实现在一些小程序中我们不伐会用到市区选择器,那它是如何实现的,下面展示一下,效果图. 首先在wxml这个文件中用到picker这个组件,picker是从底部加载的滚动选择 ...
关于微信小程序picker之multiSelector多列选择器
文章目录前言使用步骤 1.wxml 2.读入数据总结前言由于业务场景,需要使用自定义内容的多列选择器,自然而然选择了微信小程序官方提供的picker选择器,mode模式为multiSelec ...
range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
微信小程序日期与时间选择器
最近在开发一款微信小程序,需要用到里面的时间选择器(picker),根据它本身的特点以及需要开发的内容,我对时间选择器做了一个简单的demo,大家可以看一下效果图. 效果图: 在微信小程序中,文件按照 ...
微信小程序开发之城市选择器城市切换
移动开发中城市选择器必不可少. 空白造了个. gif: 这里只上部分js代码: var city = require('../../utils/city.js');//欢迎关注:http://w ...
实现微信小程序picker 省市区自定义数据支持三级联动
再使用微信小程序时发现当 mode="region" 时数据选择的省市区的数据不支持后台返回的数据以下实现后台返回数据操作先设置HTML name 字段名字要替换掉 ...

微信小程序picker多列选择器：mode = multiSelector

一、效果图（多列）

二、普通选择器：mode = selector、多列选择器：mode = multiSelector

三、app.json

四、picker.wxml

五、picker.js

微信小程序picker多列选择器：mode = multiSelector相关推荐

最新文章

热门文章