微信小程序picker滚动选择器使用详解

1年前 5406次浏览

今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下:

picker基础使用

picker滚动选择器(下简称picker)是微信小程序自带的组件,无需引入任何文件,只要在适当的位置放入picker代码点击后就可以从底部弹起的滚动选择器。

<picker>最简单使用</picker>

2001.png

当然我没有定义数据,所以选择器里面是没有内容的。

picker赋值

如何给上面的滚动选择器里面赋上值呢?使用range就可以在滚动选择器里面加入选择内容。

<picker range="{{['1','2','3']}}">range赋值</picker>

2002.png

当然也可以绑定数据,但要注意的是数据只能是["1","2","3"]这种格式数组。

2003.png

多列picker选择器

上面的滚动选择器只有一列,有时侯我们需要两列或者多列该如何使用呢?

使用mode = multiSelector来将其定义为多列选择器。如果没有设置则默认为普通选择器,其它还有:

时间选择器:mode = time

日期选择器:mode = date

省市区选择器:mode = region,这里介绍多列选择器。

<picker range="{{test}}" mode="multiSelector">多列滚动选择器</picker>

设置其为多列选择器后,需要通过数据来指定几列,同样使用上面的test数据的话,我们可以看到选择器里面是三列,原因便是test数据有三组,也就是通过数组的长度来决定有几列选择器的。

2004.png

如果我们需要做两列,则将数据定为两组,每组中的数据则为该列的数据。如图:

2005.png

简单点说,多列picker就是通过range的数据来控制几列与列数据。如果想做三列就做三组数据,四列就做四组数据...

2006.png

data: {
test: [
    ["第一列第一个", "第一列第二个", "第一列第三个"],//第一列数据
    ["第二列第一个","第二列第二个"],//第二列数据
    ["第三列"],
    ["第四列"]
]
},
picker事件监听

picker滚动选择器做出来后,要监听其操作事件,主要的操作事件有两个,bindchange(改变值事件,理解为点确定按钮后触发即可)与bindcolumnchange(列表改变事件,理解为滑动触发事件,这个事件只有在多列选择器中有效),这里我以多列选择器为例测试一下这两个事件:

2007.png

bindchange事件:当点击确定后执行该事件,通过控制台输出内容就可以发现输出值为每一列选择了哪一栏。e.detail.value值便是每一列选了第几行。我这里都选的是第一行所以value值为[0,0,0,0]。

2008.png

bindcolumnchange事件:当我们滑动了选择器中的某一列数据时,就会触发该事件,在控制台中查看,会显示滑了哪一列,滑动到了哪一栏。

2009.png

这里我将控制台输出事件改了一下,通过下面动图能看得更仔细点。

test111.gif

定义滑动选择器的选中

有些时侯我们需要对滚动选择器做一个默认选择,这个时侯可以通过value来设置各列的选择状态。如上面四列的如果我要设置默认都选第二个值,可以给value设置[1,1,1,1]。

2010.png

小结:通过上面的介绍,我们可以了解到配置picker主要就是配置其内容、默认值、两个事件。但是需要注意的是picker的value并不是实际应用中我们需要的value,所以往往实际上我们还需要再做一个数据来与这边对应。

还有就是,上面的示例中所有的数据都是静态的,但是往往我们实际应用中当前一列选中值改变后,随之后面一列的内容也要跟着改变。要实现也比较简单,通过bindcolumnchange事件重新赋值给range数据即可。具体请看后面一篇文章:picker实战动态列数据与分类筛选数据

相关评论
暂无相关评论...
发表评论
评论说明:

1、评论暂仅只持纯文字评论。

2、请不要发表与内容无关的评论。

3、评论需要经由审核才能显示出来。

4、评论姓名与链接无要求,只要评论内容符合便可审核通过。