程序员吧
首页 >编程 >正文

微信小程序使用picker组件出现的问题探究

2023-01-14 11:13出处/作者：小冰整合编辑：@小冰
这篇文章主要介绍了微信小程序自定义可搜索的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组件出现的问题探究的文章就介绍到这了,更多相关小程序picker组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

SQLServer 清理日志的实现
SpringBoot启动并初始化执行sql脚本问题

网友评论

登录 注册
iCMS
验证码 换一张
取 消
暂无评论...
24小时内最火资讯
  1. 1Python之列表推导式最全汇总(上篇)
  2. 2Win11安装VMware Workstation Pro,Centos,Xshell,Xftp图文教程(Linux学习必备)
  3. 3springboot使用mybatis开启事务回滚
  4. 4windows2003 的安装及安装过程遇到的问题小结
  5. 5git可视化工具Sourcetree使用全攻略(git冲突解决)
  6. 6django+vue项目搭建实现前后端通信
  7. 7Redis 分片集群的实现
  8. 8springboot使用mybatis开启事务回滚
  9. 9GPU版本安装Pytorch的最新方法步骤
  10. 10Win11安装VMware Workstation Pro,Centos,Xshell,Xftp图文教程(Linux学习必备)
三日内热门评论文章
  1. 1 Win11安装VMware Workstation Pro,Centos,Xshell,Xftp图文教程(Linux学习必备)
  2. 2 Redis处理高并发之布隆过滤器详解
  3. 3 一文带你了解MySQL字符集和比较规则
  4. 4 MySQL常见内置函数以及其使用教程
  5. 5 解决Spring Cloud feign GET请求无法用实体传参的问题
  6. 6 Feign调用中的两种Header传参方式小结
  7. 7 yocto queue微型队列数据结构源码解读
  8. 8 Idea中如何查看SpringSecurity各Filter信息
  9. 9 arrify 转数组实现示例源码解析
  10. 10 Css-In-Js实现classNames库源码解读
精彩图赏
热门视频
月度热门文章
  1. 264
    全网最强下载神器IDM使用教程之利用IDM加速下载百度网盘大文件的方法
    ·
  2. 218
    MySQL如何查看正在运行的SQL详解
    ·
  3. 198
    关于yolov8训练的一些改动及注意事项
    ·
  4. 150
    chatgpt国内镜像 pycharm idea插件使用详解
    ·
  5. 149
    VS Code里使用Debugger for Unity插件调试的方法(2023最新版)
    ·
  6. 125
    全网最强下载神器IDM使用教程之利用IDM加速下载百度网盘大文件的方法
    ·
  7. 117
    JavaWeb day5 Tomcat配置及idea创建Maven-Tomcat项目
    ·
  8. 103
    buildcheck包报错问题排查解决
    ·
  9. 97
    vscode远程开发使用SSH远程连接服务器的方法「内网穿透」
    ·
  10. 96
    全网最强下载神器IDM使用教程之利用IDM加速下载百度网盘大文件的方法
    ·
关键词

为您推荐
  • 相关阅读
  • 业界资讯
  • 手机通讯
  • 电脑办公
  • 新奇数码
  • 软件游戏
  • 科学探索
用户反馈 返回首页 相关阅读 参与讨论 回到顶部

程序员吧感受编程的乐趣

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2022 程序员吧. All rights reserved. Powered by ITBeta V7.0.16