返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序自定义多列选择器使用
  • 336
分享到

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

2024-04-02 19:04:59 336人浏览 泡泡鱼
摘要

本文实例为大家分享了微信小程序自定义多列选择器的具体代码,供大家参考,具体内容如下 项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用

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

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

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

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

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
    })
  },

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

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

--结束END--

本文标题: 微信小程序自定义多列选择器使用

本文链接: https://lsjlt.com/news/154060.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序自定义多列选择器使用
    本文实例为大家分享了微信小程序自定义多列选择器的具体代码,供大家参考,具体内容如下 项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用...
    99+
    2024-04-02
  • 微信小程序如何自定义多列选择器
    今天小编给大家分享一下微信小程序如何自定义多列选择器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。项目需要,需要实现一个多列...
    99+
    2023-07-02
  • 微信小程序中怎么自定义一个多列选择器
    这篇文章给大家介绍微信小程序中怎么自定义一个多列选择器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。在.wxml建一个自定义picker组件:<picker  &nbs...
    99+
    2024-04-02
  • 微信小程序自定义滚动选择器
    本文实例为大家分享了微信小程序自定义滚动选择器的具体代码,供大家参考,具体内容如下 最近项目里有个需求要做个滚动选择器,在网上找了半天也没找到合适的demo,没办法只能发挥我的聪明才...
    99+
    2024-04-02
  • 微信小程序自定义日期选择器
    日期选择器是我们在写项目的过程中经常遇到的,有需要标题的选择器,也有不需要标题的选择器 今天给大家带来一个自定义的时间选择器,废话不多说,直接上代码 第一步:先创建一个picker的...
    99+
    2024-04-02
  • 微信小程序怎么自定义滚动选择器
    这篇文章主要介绍“微信小程序怎么自定义滚动选择器”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序怎么自定义滚动选择器”文章能帮助大家解决问题。js:// pages/xuanzeq...
    99+
    2023-07-02
  • 微信小程序自定义时间段picker选择器
    本文实例为大家分享了微信小程序自定义时间段picker选择器的具体代码,供大家参考,具体内容如下 想实现一个可以选择年份和时间段的日期选择器,如下所示 微信小程序自带的picker...
    99+
    2024-04-02
  • 微信小程序实现多列选择器
    本文实例为大家分享了微信小程序实现多列选择器的具体代码,供大家参考,具体内容如下 <picker class="picks" mode="multiSelector" bind...
    99+
    2024-04-02
  • 微信小程序picker多列选择器怎么用
    本篇内容主要讲解“微信小程序picker多列选择器怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序picker多列选择器怎么用”吧!vue-next-admin,这是基于 vue3...
    99+
    2023-06-08
  • 微信小程序picker多列选择器(mode = multiSelector)
    目录一、效果图(多列)二、普通选择器:mode = selector、多列选择器:mode = multiSelector三、app.json四、picker.wxml五、picke...
    99+
    2024-04-02
  • 微信小程序自定义复选框
    本文实例为大家分享了微信小程序自定义复选框的具体代码,供大家参考,具体内容如下 1、效果  2、wxml <checkbox-group bindchange="c...
    99+
    2024-04-02
  • 微信小程序自定义日期选择器的示例分析
    这期内容当中小编将会给大家带来有关微信小程序自定义日期选择器的示例分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。日期选择器是我们在写项目的过程中经常遇到的,有需要标题的选择器,也有不需要标题的选择器今...
    99+
    2023-06-26
  • 微信小程序自定义组件实现多选功能
    本文实例为大家分享了微信小程序自定义组件实现多选的具体代码,供大家参考,具体内容如下 效果图: 调用部分(例如在index页面) index.wxml <view catch...
    99+
    2024-04-02
  • 微信小程序多项选择器checkbox
    本文实例为大家分享了微信小程序多项选择器checkbox的具体代码,供大家参考,具体内容如下 第一的话就是我们的相关的布局文件: <view class="container...
    99+
    2024-04-02
  • 微信小程序怎么自定义复选框
    本篇内容介绍了“微信小程序怎么自定义复选框”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果 wxml<checkbox-g...
    99+
    2023-07-02
  • 微信小程序中使用 TDesign 自定义 TabBar
    文章目录 一、按照小程序官方文档配置 TabBar(app.json文件内)二、在小程序根目录(与 pages 平级)新建 custom-tab-bar(必须使用此名称) 文件夹三、右击 cu...
    99+
    2023-09-11
    微信小程序 tdesign 小程序
  • 微信小程序多项选择器checkbox怎么使用
    这篇文章主要介绍“微信小程序多项选择器checkbox怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序多项选择器checkbox怎么使用”文章能帮助大家解决问题。第一的话就是我们的相...
    99+
    2023-07-02
  • 微信小程序中怎么自定义一个单项选择器样式
    微信小程序中怎么自定义一个单项选择器样式,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。wxml:<view bindcha...
    99+
    2024-04-02
  • 微信小程序自定义状态栏
    本文实例为大家分享了微信小程序自定义状态栏的具体代码,供大家参考,具体内容如下 首先我们需要在json文件中修改一下配置。如果我们只需要在一个页面使用自定义状态栏,我们可以在这个页面...
    99+
    2024-04-02
  • 微信小程序自定义tabbar组件
    本文实例为大家分享了微信小程序自定义tabbar组件的具体代码,供大家参考,具体内容如下 由于项目需求,必须自己写组件: 第一步:在App.json中配置tabBar,自定也组件也必...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作