微信小程序使用picker组件出现问题怎么解决
导读:本文共4327.5字符,通常情况下阅读需要14分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、picker基本概念先来看一下官方文档中picker的基本概念:从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。重要属性range: 选取范围,数据类型为Array / Object Array,mode为 普通选择器 时,range 有效;value: value 的值表示选择了 r... ...
目录
(为您整理了一些要点),点击可以直达。先来看一下官方文档中picker的基本概念:
从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。
重要属性
range: 选取范围,数据类型为Array / Object Array,mode为 普通选择器 时,range 有效;
value: value 的值表示选择了 range 中的第几个(下标从 0 开始),数据类型肯定是Number;
bindchange: 绑定事件,value 改变时触发 change 事件,event.detail = {value: value}。
mode:选择器类型,可以是selector( 普通选择器)、multiSelector(多列选择器)、date(时间选择器)、time(日期选择器)、region(省市区选择器);
问题说在前面,同一个页面使用多个普通选择器遇到了问题,选择一个选项,其他选项也跟随着改变了。
代码如下:
因为默认索引值(也叫“下标”)都是index
,绑定事件也只是改变了index
。所以改变一个选项,其他选项都跟着改变了。
首先想到的解决办法就是自定义不同的索引值index1、index2,、index3,分别绑定不同的时间bindchange1、bindchange2、bindchange3改变其对应的索引值。
代码如下:
这样一个页面多个picker的问题就解决了,但是现在又发现了一个新的问题:
为什么多个picker会出现相互影响的问题?比如在第一个选择器选择了3,剩下的选择器点进去默认都是从第3个开始?” 小程序开发工具中的确存在,看了社区的帖子,才知道这个是官方的bug,目前还没有修复。
在这里使用了多个picker,可以想到使用wx:for
循环,那么为了渲染方便,数据就要修改为对象的数组。
wx:for绑定数组objArray,当前项的下标变量名默认为index,数组当前项的变量名默认为item,为了区分选项option中的下标
使用 wx:for-item 可以指定数组当前元素的变量名为itm,使用 wx:for-index 可以指定数组当前下标的变量名为idx。
关键点是:自定义一个属性对应当前下标 data-current=“{{idx}}”,绑定事件bindChange_select触发时判断出是哪个数组对象触发的,就改变该数组对象中的index值。
微信小程序使用picker组件出现问题怎么解决的详细内容,希望对您有所帮助,信息来源于网络。