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

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

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

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

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

组件说明：

picker：

滚动选择器，现支持三种选择器，通过mode属性来区分，分别是普通选择器(mode = selector)，时间选择器(mode = time)，日期选择器(mode = date)，默认是普通选择器。

用框架做项目可以事半功倍，它封装好的各种功能免去你很大部分的工作。taro+taroui可以很好的实现开发一次，多端运行为目的的小程序。

Taro UI - Picker 选择器是从底部d起的滚动选择器，从官网给出的示例来看，通过onChange可以改变值，state的数据储存也是很简单的

state={selector:['美国','中国','巴西','日本']}

但是做项目的时候，数据的结构不可能那么简单，有时候是多层嵌套+多个条件选择，比如：

options数组里有3个对象，即要渲染出3个Picker选择器。

在当前js中，是无法在循环条件下渲染出来选择器的，就onChange触发的函数来说，就没法监听是由哪个对象改变的。

其实解决办法很简单，将选择器抽取出来为组件，父页面循环数组给子组件传递单个对象，这样渲染出来的每个选择器都是相互独立的，内调的onChange方法在子组件内部监听，也不会影响其他选项。

uniapp picker组件并无可以修改“完成”和“取消”文字的属性，直接改源码则比较麻烦，故可以通过css伪类的方式来修改：

如上图，将uniapp自带的文字颜色强制改为白色，为其添加伪类并设置伪类的文字和颜色，即可实现“完成”文字的自定义修改；

同理，自定义“取消”，为类名为uni-picker-action-cancel的标签设置相应的伪类即可

效果图：

以上就是关于小程序picker多列滚动使用注意事项全部的内容，包括:小程序picker多列滚动使用注意事项、微信小程序滑动选择器怎么实现、遇到多选择项的时候，Taro-Picker组件如何使用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！