微信小程序自定义多列选择器使用

 更新时间:2022年07月11日 10:22:46   作者:赫萝的红苹果  
这篇文章主要为大家详细介绍了微信小程序自定义多列选择器使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序自定义多列选择器的具体代码,供大家参考,具体内容如下

项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用户选择确定才会把新选择的内容更新到已确定的显示值上。

目前个人思路是保存两份,一份用来存放用户选择的中间值,当用户点击确定时,把中间值更新为已确认值。如果用户选择取消,就把中间值更新为已确认值。

因为微信小程序中的多列选择器是用数组存放数据,因此在拷贝中涉及到深拷贝,必须是深拷贝才能实现上面的设想。
因此可以下面代码实现深拷贝:

var arr=JSON.parse(JSON.stringify(this.data.multiArray));

wxml:

<picker bindcancel="cancelAddr" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{demoIndex}}" range="{{demoArray}}">
            <view class="picker">
                收货地址:{{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() {
    var arr = JSON.parse(JSON.stringify(this.data.multiArray));
    var index = JSON.parse(JSON.stringify(this.data.multiIndex));
    this.setData({
      demoArray: arr,
      demoIndex: index
    })
  },
  //地址选择器改变
  bindMultiPickerColumnChange(e) {
    var value = e.detail.value;
    var column = e.detail.column;
    var demoArray = this.data.demoArray;
    var demoIndex = this.data.demoIndex;
    if (column === 0 && value != 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("all change");
    var arr = JSON.parse(JSON.stringify(this.data.demoArray));
    var index = JSON.parse(JSON.stringify(this.data.demoIndex));
    this.setData({
      multiArray: arr,
      multiIndex: index
    })
  },

效果图(上面代码的数据数量删除了部分):

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • showModalDialog 和 showModelessDialog

    showModalDialog 和 showModelessDialog

    showModalDialog 和 showModelessDialog...
    2007-01-01
  • JavaScript的事件机制详解

    JavaScript的事件机制详解

    事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一。本文将详细探讨JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流、事件处理程序绑定方式、事件对象等。
    2017-01-01
  • JavaScript报错:Uncaught TypeError: Cannot set property ‘X‘ of undefine的解决方案

    JavaScript报错:Uncaught TypeError: Cannot set&n

    在 JavaScript 编程中,“Uncaught TypeError: Cannot set property ‘X’ of undefined” 是一种常见的错误,这种错误通常发生在试图给一个未定义的对象的属性赋值时,本文介绍了JavaScript报错的解决方案,需要的朋友可以参考下
    2024-07-07
  • JS事件流与事件处理程序实例分析

    JS事件流与事件处理程序实例分析

    这篇文章主要介绍了JS事件流与事件处理程序,结合实例形式分析了事件流与事件处理程序相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2019-08-08
  • 7道关于JS this的面试题,你能答对几个

    7道关于JS this的面试题,你能答对几个

    这篇文章主要给大家介绍了7道关于JS this的面试题,来看看你能答对几个,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 如何使用JS获取当前节点的兄弟/父/子节点

    如何使用JS获取当前节点的兄弟/父/子节点

    在日常的网页开发中,我们会遇到获取节点的问题,而js是写网页的最基础的语言,也是最常用的,这篇文章主要给大家介绍了关于如何使用JS获取当前节点的兄弟/父/子节点的相关资料,需要的朋友可以参考下
    2023-04-04
  • JS之延时器和定时器执行示例详解

    JS之延时器和定时器执行示例详解

    这篇文章主要为大家介绍了JS之延时器和定时器执行示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • js识别不同浏览器基于userAgent做判断

    js识别不同浏览器基于userAgent做判断

    本节主要介绍了js识别不同浏览器依据是userAgent,需要的朋友可以参考下
    2014-07-07
  • Javascript异步执行不按顺序解决方案

    Javascript异步执行不按顺序解决方案

    这篇文章主要介绍了Javascript异步执行不按顺序解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • 小程序云开发如何实现图片上传及发表文字

    小程序云开发如何实现图片上传及发表文字

    这篇文章主要为大家详细介绍了小程序云开发教程,如何实现图片上传及发表文字,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论