van-picker 在微信小程序中的用法 – 省市区多级联动

alvin 2021年12月12日12:22:34小程序运营评论3次501字

成品图

van-picker 在微信小程序中的用法 – 省市区多级联动

一、数据格式

数据是树形结构的数据

van-picker 在微信小程序中的用法 – 省市区多级联动

数据结构
二、在xxx.json文件中引入vant组件


  1. {
  2. "usingComponents": {
  3. "van-picker":"/components/vant-weapp/dist/picker/index",
  4. "van-popup":"/components/vant-weapp/dist/popup/index",
  5.   },
  6. "navigationBarTitleText":"用户注册"
  7. }

三、在xxx.wxml使用组件

wxml页面代码

van-picker 在微信小程序中的用法 – 省市区多级联动

四、xxx.js

js代码

van-picker 在微信小程序中的用法 – 省市区多级联动

js部分代码主要强调以下几点:

1.多列数据格式:对象数组,其中可在页面的 value-key 来指定文字对应的 key 也就是列上所展示的内容。

2.change方法的参数中 :  value: 代表当前改变之后,各列选中的数据;

index:当前改变的是第几列,0代表第一列,以此类推;

picker:当前多列对象

picker.setColumnValues() 方法:用来设置更新各列数据。参数:columnIndex(更新第几列), values(该列数据).

3.confirm方法:点击弹框的确定按钮,返回当前选中各列数据。

螺柱焊机,点焊机,修磨机,伺服电动缸,弧焊机采购咨询请联系孙辉:18682260315(微信同号),欢迎致电!
  • 公众号:孙辉说焊接
  • 欢迎广大汽车制造焊接工艺与车身新材料连接技术研究的朋友们一起探讨新技术、新设备。
  • weinxin
  • 抖音号:shok
  • 竭力打造“鸿栢科技”和“智哥”双品牌,砥砺前行,致力于发展壮大中国的汽车装备工业!
  • weinxin
alvin
  • 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 hui@36kp.com 举报,一经查实,本站将立刻删除。
  • 转载请注明:https://www.sunhui.me/nettg/10731.html - 孙辉博客

发表评论