小程序picker标题_微信小程序picker组件遇到的问题与解决方案

一、picker基本概念

当然先看官方文档 picker说明搞清楚基本概念

“从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。”

几个主要属性：

range： 选取范围，数据类型为Array / Object Array，mode为 普通选择器 时，range 有效；

value： value 的值表示选择了 range 中的第几个(下标从 0 开始)，数据类型肯定是Number；

bindchange： 绑定事件，value 改变时触发 change 事件，event.detail = {value: value}。

二、遇到问题

今天在同一个页面使用多个普通选择器遇到了问题，选择一个选项，其他选项也跟随着改变了.

代码如下:

//picker.wxml：

选项一

{{option1[index]}}

选项二

{{option2[index]}}

选项三

{{option3[index]}}

//picker.js

Page({

data: {

index:0,//设置索引值默认为0

option1: ['1', '2', '3','4','5'],

option2: ['一', '二', '三','四','五'],

option3: ['①', '②', '③','④','⑤'],

},

bindchange1:function (e) {

// console.log('picker发送选择改变，携带值为', e.detail.value)

// 设置这个携带值赋值给索引值index

// 所以option1 ,option2 ,option3的索引值都是一样的

this.setData({

index: e.detail.value

})

}

})

因为默认索引值(也叫“下标”)都是index，绑定事件也只是改变了index。所以改变一个选项，其他选项都跟着改变了。

三、怎么解决呢？

首先想到的是给三个选项自定义不同的索引值index1,index2,index3，分别绑定不同的事件bindchange1，bindchange2，bindchange3改变其对应的索引值，互不干扰。

代码如下：

//picker.wxml：

选项一

{{option1[index1]}}

选项二

{{option2[index2]}}

选项三

{{option3[index3]}}

// picker.js

Page({

data: {

index1:0,

index2:0,

index3:0,

option1: ['1', '2', '3','4','5'],

option2: ['一', '二', '三','四','五'],

option3: ['①', '②', '③','④','⑤'],

},

bindchange1:function (e) {

this.setData({

index1: e.detail.value

})

},

bindchange2:function (e) {

this.setData({

index2: e.detail.value

})

},

bindchange3:function (e) {

this.setData({

index3: e.detail.value

})

}

})

这样，一个页面使用多个picker的问题就解决了。但在发现小一个问题。

搜索到jiong也提出了这个问题：

“为什么多个picker会出现相互影响的问题？比如在第一个选择器选择了3，剩下的选择器点进去默认都是从第3个开始？”

小程序开发工具(PC端)中的确存在，也没有好的解决办法。

但是，我用手机亲测不存在这个问题。新版小程序开发工具已经修复此Bug

四、延伸思考

在这里我多次使用了picker，于是我想到了使用循环 wx:for，(以后如果还要用可以做成一个模板)

那么数据就要修改为对象的数组(Object Array) ，我理解为json格式(不知道对不对)

picker.js

// picker.js

Page({

data: {

//每个对象就是一个选择器，有自己的索引值index，标题title，选项option(又是一个数组)

objArray:[

{

index:0,

title:'选项一',

option: ['1', '2', '3','4','5'],

},

{

index:0,

title:'选项二',

option: ['一', '二', '三','四','五'],

},

{

index:0,

title:'选项三',

option: ['①', '②', '③','④','⑤']

},

]

},

// 绑定事件，因为不能用this.setData直接设置每个对象的索引值index。

// 所以用自定义属性current来标记每个数组对象的下标

bindChange_select: function(ev) {

// 定义一个变量curindex 储存触发事件的数组对象的下标

const curindex = ev.target.dataset.current

// 根据下标 改变该数组对象中的index值

this.data.objArray[curindex].index = ev.detail.value

// 把改变某个数组对象index值之后的全新objArray重新 赋值给objArray

this.setData({

objArray: this.data.objArray

})

}

})

picker.wxml

wx:for绑定数组objArray,当前项的下标变量名默认为index，数组当前项的变量名默认为item，为了区分选项option中的下标

使用 wx:for-item 可以指定数组当前元素的变量名为itm，

使用 wx:for-index 可以指定数组当前下标的变量名为idx

关键点是：自定义一个属性对应当前下标 data-current="{{idx}}"，绑定事件bindChange_select触发时判断出是哪个数组对象触发的，就改变该数组对象中的index值

//picker.wxml：

{{itm.title}}

{{itm.option[itm.index]}}