小程序picker（小程序pickerview）

本篇文章给大家谈谈小程序picker，以及小程序pickerview对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、小程序picker多列滚动使用注意事项
• 2、小程序PICKER联动中的文字太长显示不全
• 3、wx小程序-picker自定义性别
• 4、微信小程序之利用vant-picker实现三级联动

小程序picker多列滚动使用注意事项

最近公司开发的小程序中，用到了小程祥孝神序的picker组件，写了个二级级联动（三级联动同理）。慎返从页面上看，明显数据已经是加载上去了，而且也确实是正确的

从这张图上可以看到，明明第二列的数组已经设置是长度为一个，但是在谨亏页面上，却显示了两个。

排查下来，就是文本中，name不能重名。必须保持是唯一的。

当我们把name设置成唯一值的时候，就不会有问题了。

小程序PICKER联动中的文字太长显示不全

小程序PICKER联动中的文字太长显示不全的教程步骤：

1，新建字幕 pr中点击“文件——新建——旧版标题”答配蔽，就可以打开新建字幕窗口。2，设置名清州称 设置字幕的名称，点击确定卖滑。3，点击滚动设置图标 设置好字幕内容之后，点击滚动设置图标（带有上下两个箭头符号的图标）。4，选择滚动选项 字幕类型选择为“滚动”，点击确定即可。

wx小程序-picker自定义性别

register.wxml

view class="form-item list-msg"

text class="颤羡item_name"性别/text

picker bindchange="pickSex" value="{{ gender }}" class="sex" range="{{ columns }}"

view

{{ columns[gender] == "" ? "请输入性茄改拍别" : "" }}{{ columns[gender] }}

/view

/picker

/歼芦view

register.js

Page（{

columns: ["未知", "男", "女"],

gender: 0 || wx.getStorageSync("gender") * 1,

}）

pickSex: function(e) {

this.setData({

gender: e.detail.value

});

// console.log("当前选择性别-sex", e.detail.value);

},

[img]

微信小程序之利用vant-picker实现三级联动

拟设计一个设备故障状况选择器，需要三级联动，第一级：设备大类；第二级：设备细类；第三级：故障描述，如下图：

1、需要引入vant-picker，需要定制一个数组，包含三级即[一级，一级内容，子类[二级，二级内容，子类[三级，三级内容]]]，如下图

2、在vant-picker的onChange事件中，对上面数组进行分级控制。

3、难点，需要把数组按三级拆分出来，放到picker的三列中，控制不好就会各伍神种报错。

1、json，引入vant-picker

2、wxml

绑定change confirm 2个必须事件

3、js文件

3.1 定义选项内容，需要分成三级

3.2 data 中实现picker3列

3.3 onChange 事件实现

3.4 常见问题

3.4.1 最后一级如果没有内容，vant-picker会报错，所以需要做一个空判斗激断，如果为空，赋值一个常量

3.4.2 是使用value，还是选择使用自己定义的常量，需要调试看。value值已经获取到了三列数据，但是容易出错。腔销亏我最后还是选择使用原来定义常量proSelectList。

4.1 三级数据齐全的选择

4.2 第三级如果为空，第三列使用默认数据

关于小程序picker和小程序pickerview的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。