本篇文章给大家带来的内容是关于小程序中如何实现三级选择器组件？（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果

实现过程

在小程序已有的picker组件中设置mode="multiSelector"，使之成为多列选择器。

在多列选择器中有两个重要的参数：

multiArray是一个二维数组，存放选择器每一列上的选项列表。multiIndex是一个一维数组，存放每一列被选中的值，例：[0,0,0] 表示第一列选中了第0个选项，第二列也选中了第0个选项，以此类推。这两个参数都由用到三列选择器的页面传入。

在小程序已有的picker组件中绑定bindPickerChange事件和columnchange事件，当用户确定选择器的选项值或改变某列选项值时会分别触发这两个事件：

设置multiSelectorValue事件和multiSelectorColumn事件，来让用到三列选择器的页面捕捉到选择器选项值的改变。

在要用到三列选择器的页面里引入三列选择器组件，比如叫v-picker-multiSelector：

通过设置receiveMultiSelectorValue函数和receiveMultiSelectorColumn函数来接收选项值的变化：

当三列选择器的某列值改变时，页面从组件里接收到改变的列数（column）和该列被选择的值（columnValue）。对column进行判断，如果column=0，那么根据columnValue的值向后端请求回该省的市列表，并根据市列表的的第一位向后端请求回该市的区列表。如果column=1，那么那么根据columnValue的值向后端请求回该市的区列表。

当用户确定三列选择器的选项时，页面从组件中接收到multiIndex的值，并对选项值进行更新。

以上就是小程序内实现三级选择器组件的方法及代码示例的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。