微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
类别:编程学习 浏览量:1551
时间:2021-10-14 00:13:30 微信小程序单选框组件
微信小程序picker多列选择器mode = multiSelector目录
- 一、效果图(多列)
- 二、普通选择器:mode = selector、多列选择器:mode = multiSelector
- 三、app.json
- 四、picker.wxml
- 五、picker.js
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" } }
<!--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>
多列选择器: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多列选择器内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- html5按钮点击跳转(HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题)
- 小程序ui设计样式(AmazeUI 平滑滚动效果的示例代码)
- 小程序实现左右滑动窗口(小程序实现分页效果)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- thinkphp5开发小程序后台(PHP小程序支付功能完整版基于thinkPHP)
- python编写的小程序(几个适合python初学者的简单小程序,看完受益匪浅!推荐)
- dedecms织梦小程序插件(批量删除织梦dedecms文档搜索关键词的方法)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- python小程序编程代码(python实现烟花小程序)
- 小程序开发计算方法(小程序实现简单的计算器)
- 微信小程序计算器怎么用(用微信小程序实现计算器功能)
- 聊天室python小程序(用Python写一个模拟qq聊天小程序的代码实例)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- 微信小程序数学公式(微信小程序计算器实例详解)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- 靳东领衔打造高精职场 新丽出品《精英律师》曝定妆照(靳东领衔打造高精职场)
- 靳东新剧《精英律师》定档,众星云集,这剧可追(靳东新剧精英律师定档)
- 精英律师 廖佳敏封印恋情曝光,顾婕马失前蹄 你个老不死的(廖佳敏封印恋情曝光)
- 以家人之名广受好评,剧情生动引起观众共鸣,演员张新成圈粉无数(以家人之名广受好评)
- 三兄妹感情再遇波折,人设接连崩塌 《以家人之名》剧情猜不透(三兄妹感情再遇波折)
- 《小敏家》金波想要复婚 这只是他圈套的第1步,更可恶的在后面(小敏家金波想要复婚)
热门推荐
- linux hadoop client 连接hbase(使用docker部署hbase的方法)
- iframe 弹窗(遮罩层 + Iframe实现界面自动显示的示例代码)
- mysql innodb存储原理(mysql innodb的重要组件汇总)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- dede网站地图模块(Dedecms中百度网站地图制作的方法图文教程)
- 怎么使用阿里云cdn(阿里云CDN加速和全站加速DCDN区别及如何选择)
- laravel开发api实例(Laravel框架集成UEditor编辑器的方法图文与实例详解)
- vue代码统计(Vue实现计数器案例)
- 宝塔面板怎么修改默认端口(如何修改宝塔Linux面板默认的端口号8888?)
- python最简单实例(Python文件打开方式实例详解a、a+、r+、w+区别)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9