资讯专栏INFORMATION COLUMN

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

3403771864 / 502人阅读

  在项目搭建过程中吃,需要实现一个多列选择器,在用户确定之前,无论列表如何转,对于已选择的都不会有影响,只有在确定选择内容后才显示值上。

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

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

  因此可以下面代码实现深拷贝:

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

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

  详细代码和效果展示就说道这里,欢迎大家关注更多精彩内容。


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/128305.html

相关文章

  • mpvue实现信小程序(欢迎踩坑)

    摘要:最近刚使用完成了微信小程序的开发,写点东西,做个记录。专门用于外链跳转但是外链跳转还是个坑,微信仅能支持跳到在它那边注册过的的网址,其他还是不行,暂时没有找到好的方式看了知乎,它的外链直接转成了文本,不可点击了。 最近刚使用mpvue完成了微信小程序的开发,写点东西,做个记录。 首先依旧是两个传送门: 微信小程序文档:[https://developers.weixin.qq.com/...

    jas0n 评论0 收藏0
  • mpvue实现信小程序(欢迎踩坑)

    摘要:最近刚使用完成了微信小程序的开发,写点东西,做个记录。专门用于外链跳转但是外链跳转还是个坑,微信仅能支持跳到在它那边注册过的的网址,其他还是不行,暂时没有找到好的方式看了知乎,它的外链直接转成了文本,不可点击了。 最近刚使用mpvue完成了微信小程序的开发,写点东西,做个记录。 首先依旧是两个传送门: 微信小程序文档:[https://developers.weixin.qq.com/...

    xuexiangjys 评论0 收藏0
  • mpvue实现信小程序(欢迎踩坑)

    摘要:最近刚使用完成了微信小程序的开发,写点东西,做个记录。专门用于外链跳转但是外链跳转还是个坑,微信仅能支持跳到在它那边注册过的的网址,其他还是不行,暂时没有找到好的方式看了知乎,它的外链直接转成了文本,不可点击了。 最近刚使用mpvue完成了微信小程序的开发,写点东西,做个记录。 首先依旧是两个传送门: 微信小程序文档:[https://developers.weixin.qq.com/...

    notebin 评论0 收藏0
  • 演示信小程序地区选择伪五级联动

      在项目中,要求微信小程序的地区可以选择伪五级联动  展示如下  这里采用的是自定义多列选择器picker mode="multiSelector"  <viewclass="section">   <viewclass="section__title">多列选择器</view>   <pick...

    3403771864 评论0 收藏0
  • 信小程序开发中的二三事之网易云信IMSDK DEMO

    摘要:传统的网页编程采用的三剑客来实现,在微信小程序中同样有三剑客。观察者模式不难实现,重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型,微信小程序中自然也有。 本文由作者邹永胜授权网易云社区发布。 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

    weij 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<