前言

由于业务场景，需要使用自定义内容的多列选择器，自然而然选择了微信小程序官方提供的picker选择器，mode模式为multiSelector，使用过程中也因个人对文档理解不透彻掉入了一些坑，记录下使用方法和心得，供一些需要的小伙伴们爬坑。

使用步骤

1.wxml

代码如下（示例）：

<picker mode="multiSelector" range="{{storeRange}}" value="{{selectVal}}" range-key="categoryName" bindchange="bindchange" bindcolumnchange="bindcolumnchange">

picker标签内，mode选择multiSelector，需提供range数组，也就是我们在选择器中看到的内容，
例如

2.读入数据

如上图示，第一列为第一级类目列表，第二列为每个一级类目对应的二级类目列表，这些数据由我们动态获取后再赋值于storeRange。

划重点–1：

很多小伙伴们对multiSelector的range数据格式不了解，数据格式应为二维数组或二维数组对象，比如官方提供的二维数组：

[['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']]

或我在项目中用的二维对象数组：

[[{id: "1", parentId: "0", categoryName: "美食"}, {id: "21", parentId: "0", categoryName: "超市/便利店"}],[{id: "2", parentId: "1", categoryName: "饮品店", }, {id: "3", parentId: "1", categoryName: "面包甜点"}]]

以我用的数据为例，数组的第0项为一级类目列表，第1项为对应的二级类目列表，这时我们需要使用range-key属性告诉picker我们想要以对象中哪个字段进行显示。

划重点–2：

一级类目A含有5个二级类目，一级类目B含有3个二级类目。
情景1：我们先选择A的第5个二级类目，此时切换B，B的二级类目复位到第1个。
情景2：我们先选择A的第2个二级类目，此时切换B，B的二级类目停留在第2个。
根据一般的业务场景，显然更换一级类目时，复位二级类目位置更符合我们的使用习惯，这时我们就用到了value属性，value我对应的selectVal是个数组，属性的第0项表示一级类目下标，第1项表示二级类目下标，如何获取到滑动选择的下标值？答：bindcolumnchange

我们可以通过bindcolumnchange方法回调的e.detail.column来判断用户滑动的是哪一列，e.detail.value表示下标值。我们可以对selectVal进行赋值，在更换一级类目时，对二级类目复位。

// column为0时切换一级类目，selectVal[1]复位到0
if(e.detail.column === 0){this.setData({selectVal: [e.detail.value, 0],})this.getStoreCategoryS();//这里重新获取赋值二级类目列表}if(e.detail.column === 1){this.setData({selectVal: [this.data.cateOneIndex, e.detail.value]})}

划重点–3

只剩下最后一个属性bindchange，这个是在点击picker确定按钮时触发的回调，e.detail.value其实就是我们之前已经做好的value数组selectVal

总结

至此，关于官方文档中picker选择器—多列选择器：mode = multiSelector的所有属性和用法都进行了举例介绍，希望对一些新手小伙伴们有一点点帮助。

关于微信小程序picker之multiSelector多列选择器相关推荐

微信小程序picker组件实现多列选择器
[微信小程序]picker组件多列选择器的使用功能需求用微信小程序的多列选择器实现对一个树状结构图中的末节点的选择,要求选择器的第一列改变时,后面列的选项会联动改变.树状结构图的部分数据如下图; ...
微信小程序多项选择器_微信小程序三级联动之多列选择器
有些时候,三级联动业务场景并不只是全国地区选择,可能还涉及到自定义分类的三级联动,这时就需要使用微信的多列选择器. 如果只是一列字段,或者每次拖动一次都去服务端取,会比较容易. 如果想一次定义好jso ...
微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器效果组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
实现微信小程序picker 省市区自定义数据支持三级联动
再使用微信小程序时发现当 mode="region" 时数据选择的省市区的数据不支持后台返回的数据以下实现后台返回数据操作先设置HTML name 字段名字要替换掉 ...
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
微信小程序picker组件仅点击其中的内容才会触发事件
微信小程序包括picker组件在内的好多组件默认情况下只有点击其中的文字内容才可以触发相应的事件:例如下图的性别一栏,默认情况下只有点击红色区域的"男"字才能触发picker绑定的 ...
记录-微信小程序picker多级联动级别不固定-又是令人头冷的一天
先贴上需求,后台返回的值结构中既有2级.也有3级和4级的children,要求联动效果 options: [{id: 10,name: "北京",list: [{id: 11,na ...
微信小程序picker实现年月日时五级联动
问题: 使用picker的multiSelector多列模式实现年月日时选择,这里的联动,只是调整日的天数,年份和月份的选择影响日的天数! 实现: 节点 <picker mode="m ...

关于微信小程序picker之multiSelector多列选择器

文章目录

前言

使用步骤

1.wxml

2.读入数据

总结

关于微信小程序picker之multiSelector多列选择器相关推荐

最新文章

热门文章