下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第微信小程序自定义多列选择器使用本文实例为大家分享了微信小程序自定义多列选择器的具体代码,供大家参考,具体内容如下
项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用户选择确定才会把新选择的内容更新到已确定的显示值上。
目前个人思路是保存两份,一份用来存放用户选择的中间值,当用户点击确定时,把中间值更新为已确认值。如果用户选择取消,就把中间值更新为已确认值。
因为微信小程序中的多列选择器是用数组存放数据,因此在拷贝中涉及到深拷贝,必须是深拷贝才能实现上面的设想。
因此可以下面代码实现深拷贝:
vararr=JSON.parse(JSON.stringify(this.data.multiArray));
wxml:
pickerbindcancel="cancelAddr"mode="multiSelector"bindchange="bindMultiPickerChange"bindcolumnchange="bindMultiPickerColumnChange"value="{{demoIndex}}"range="{{demoArray}}"
view
收货地址:{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}
/view
/picker
js:
data:{
multiArray:[
['广大生活区','广大教学区'],
['B1','B2','B3'],
['一楼','二楼','三楼']
],
demoArray:
[
['广大生活区','广大教学区'],
['B1','B2','B3'],
['一楼','二楼','三楼']
],
//实际显示值
multiIndex:[0,0,0],
//临时变量
demoIndex:[0,0,0],
teach:["文清楼","文新楼","文俊西楼"],
life:['B1','B2','B3']
}
//修改过程中取消修改
cancelAddr(){
vararr=JSON.parse(JSON.stringify(this.data.multiArray));
varindex=JSON.parse(JSON.stringify(this.data.multiIndex));
this.setData({
demoArray:arr,
demoIndex:index
})
//地址选择器改变
bindMultiPickerColumnChange(e){
varvalue=e.detail.value;
varcolumn=e.detail.column;
vardemoArray=this.data.demoArray;
vardemoIndex=this.data.demoIndex;
if(column===0value!=demoIndex[0]){
if(value===0){
demoArray[1]=this.data.life;
}else{
demoArray[1]=this.data.teach;
}
}
demoIndex[column]=value;
this.setData({
demoArray:demoArray,
demoIndex:demoIndex
})
//确定选中的地址
bindMultiPickerChange(){
console.log("allchange");
vararr=JSON.parse(JSON.stringify(this.data.demoArray));
varindex=JSON.parse(JSON.stringify(this.data.demoIndex));
this.setData({
multiArray:arr,
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年辽宁省事业单位面试真题及答案解析
- 软件开发项目需求分析及进度安排
- 企业财务预算编制与成本控制实战案例
- 《赵州桥》教学设计及学生学习反馈
- 2026广东汕尾市海丰县医共体医疗卫生人才专项招聘36人备考题库含答案详解(综合题)
- 2026云南文山州融媒体中心考核直聘高层次人才1人备考题库含答案详解(突破训练)
- 2026河北金轩工程技术咨询有限公司招聘2人备考题库及参考答案详解一套
- 2026广西来宾市忻城县体育馆招聘管理员1人备考题库含答案详解(综合卷)
- 2026吉林延边州延吉市党史地方志办公室招聘公益性岗位备考题库及一套答案详解
- 2026广东省三宜集团有限公司招聘职业经理人1人备考题库及答案详解(有一套)
- 妇科诊疗常规
- 警惕病从口入-课件
- 各大名校考博真题及答案心内科部分
- 脑疝、重症患者脑保护及颅内压监测
- 踝足部解剖和功能培训课件
- 小学科学精品课件【1.4《设计塔台模型》课件】
- 新人教版五年级下册数学(新插图)练习六 教学课件
- GB/T 23901.2-2019无损检测射线照相检测图像质量第2部分:阶梯孔型像质计像质值的测定
- GB/T 19812.3-2017塑料节水灌溉器材第3部分:内镶式滴灌管及滴灌带
- GB/T 11363-2008钎焊接头强度试验方法
- 110kV瓮北变110kV间隔扩建工程施工组织设计
评论
0/150
提交评论