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

tulayang 发布于2019-08-20 17:18 / 3157人阅读

摘要：几个主要属性选取范围，数据类型为，为普通选择器时，有效的值表示选择了中的第几个下标从开始，数据类型肯定是绑定事件，改变时触发事件，。代码如下选项一选项二选项三一二三四五这样，一个页面使用多个的问题就解决了。但在发现小一个问题。

一、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]}}

完整案例

服务器托管私有云微信小程序组件微信小程序怎么与阿里云服务器微信小程序的功能微信小程序的开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83477.html

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

摘要：几个主要属性选取范围，数据类型为，为普通选择器时，有效的值表示选择了中的第几个下标从开始，数据类型肯定是绑定事件，改变时触发事件，。代码如下选项一选项二选项三一二三四五这样，一个页面使用多个的问题就解决了。但在发现小一个问题。一、picker基本概念当然先看官方文档 picker说明搞清楚基本概念从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选...

Null 2019-06-25 11:21 评论0 收藏0
we-color-picker 微信小程序拾色器（颜色选择器）组件

摘要：最近一直在搞小程序，由于刚需一个拾色器，搜了半天也没见人做过，就自己动手撸了一个，还在不断地改进优化中。。。最近一直在搞小程序，由于刚需一个拾色器，搜了半天也没见人做过，就自己动手撸了一个，还在不断地改进优化中。。。项目地址 https://github.com/KirisakiAr... 查看DEMO showImg(https://i.loli.net/2019/01/02/...

tainzhi 2019-08-23 14:28 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

jas0n 2019-08-29 16:21 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

xuexiangjys 2019-08-23 10:56 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

notebin 2019-08-02 11:13 评论0 收藏0