微信小程序使用picker组件出现的问题探究
更新时间：2023年01月12日 16:11:10 作者：code_充电站
这篇文章主要介绍了微信小程序自定义可搜索的picker组件,主要包括自定义可搜索的picker组件的代码以及调用实例，这里的搜索框使用的是vant微信小程序组件库，picker使用的微信小程序的原生组件，需要的朋友可以参考下
一、picker基本概念
先来看一下官方文档中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（省市区选择器）；
二、遇到的问题
问题说在前面，同一个页面使用多个普通选择器遇到了问题，选择一个选项，其他选项也跟随着改变了。
代码如下：
//picker.wxml：
<view class="column_list" >
<text class="font15">选项一</text>
<picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option1}}">
<view class="select_picker">
{{option1[index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">选项二</text>
<picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option2}}">
<view class="select_picker">
{{option2[index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">选项三</text>
<picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option3}}">
<view class="select_picker">
{{option3[index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
//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：
<view class="column_list" >
<text class="font15">选项一</text>
<picker class="inputText" bindchange="bindchange1" value="{{index1}}" range="{{option1}}">
<view class="select_picker">
{{option1[index1]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">选项二</text>
<picker class="inputText" bindchange="bindchange2" value="{{index2}}" range="{{option2}}">
<view class="select_picker">
{{option2[index2]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">选项三</text>
<picker class="inputText" bindchange="bindchange3" value="{{index3}}" range="{{option3}}">
<view class="select_picker">
{{option3[index3]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
// 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的问题就解决了，但是现在又发现了一个新的问题：
为什么多个picker会出现相互影响的问题？比如在第一个选择器选择了3，剩下的选择器点进去默认都是从第3个开始？” 小程序开发工具中的确存在，看了社区的帖子，才知道这个是官方的bug，目前还没有修复。
四、延伸
在这里使用了多个picker，可以想到使用wx:for循环，那么为了渲染方便，数据就要修改为对象的数组。
// 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
})
}
})
wx:for绑定数组objArray,当前项的下标变量名默认为index，数组当前项的变量名默认为item，为了区分选项option中的下标
使用 wx:for-item 可以指定数组当前元素的变量名为itm，使用 wx:for-index 可以指定数组当前下标的变量名为idx。
关键点是：自定义一个属性对应当前下标 data-current=“{{idx}}”，绑定事件bindChange_select触发时判断出是哪个数组对象触发的，就改变该数组对象中的index值。
//picker.wxml：
<view class="column_list mt_10" wx:for="{{objArray}}" wx:for-item="itm" wx:for-index="idx" >
<text class="font15">{{itm.title}} </text>
<picker class="inputText" bindchange="bindChange_select" value="{{itm.index}}" data-current="{{idx}}" range="{{itm.option}}" >
<view class="select_picker">
{{itm.option[itm.index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
五、效果图
到此这篇关于微信小程序使用picker组件出现的问题探究的文章就介绍到这了,更多相关小程序picker组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在浏览器中使用JavaScript获取本机IP地址是不可行的,因为浏览器的安全策略禁止JavaScript访问这样的信息,这篇文章主要给大家介绍了关于JavaScript获取本机IP地址的三种常用方式,需要的朋友可以参考下2023-12-12
下面小编就为大家带来一篇浅谈js中子页面父页面方法 变量相互调用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
在layui中使用form表单监听ajax异步验证注册的实例
今天小编就为大家分享一篇在layui中使用form表单监听ajax异步验证注册的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本篇文章是对使用JS获取IE上传文件路径的实现代码进行了详细的分析介绍，需要的朋友参考下2013-07-07
本篇文章主要对javascript获取url信息的常见方法进行介绍，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
import.meta 是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象，它包含了这个模块的信息，这篇文章主要介绍了巧用 import.meta 实现热更新的问题,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
JS中的prototype与面向对象的实例讲解，需要的朋友可以参考一下2013-05-05
这篇文章主要给大家介绍了关于一次微信小程序内地图使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
本篇文章主要是对js实现日期级联效果的实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论