微信小程序使用picker组件出现问题怎么解决

本篇内容主要讲解“微信小程序使用picker组件出现问题怎么解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序使用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.jsPage({    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组件出现问题怎么解决”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！