微信小程序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.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组件遇到的问题以及解决办法文章来源地址https://www.toymoban.com/news/detail-501466.html

到了这里,关于微信小程序picker组件遇到的问题以及解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】选择器组件picker

    picker组件是一种从底部向上弹起的滚动选择器。 在官方文档中,有提供五种类型的picker组件,如普通选择器,多列选择器,时间选择器,日期选择器和省市区选择器。 (猜测是,这些选择器时不同的且常用的某种类型,于是就产生固定的模版)。 而在写法上是这么写滴,

    2024年01月18日
    浏览(58)
  • 微信小程序wxml2canvas的使用以及遇到的一些问题

    最近入坑了的一个laji(拼音)项目,各种天花乱坠、异想天开的功能,给我整头大了(菜是原罪)。具体功能呢就是需要将页面元素转为图片,然后将图片和音乐制成视频(搞不了根本搞不了,丢给后端兄弟了),当然了,不能一口吃成一个大胖子,更何况嘴都还没张开,然

    2024年02月14日
    浏览(37)
  • 微信小程序页面-筛选栏固定定位,以及使用Vant中TreeSelect控件遇到的问题

     布局思路:         1、顶部是状态栏,接着筛选栏。         2、点击【选择年份】和【选择月份】,会从底部弹出picker;点击【筛选】,则会出现遮罩层,并显示侧边导航(会议类型筛选项),和按钮。        3、 因筛选项也要固定定位,接在状态栏下面,因此可

    2024年02月13日
    浏览(47)
  • 微信小程序picker组件的简单使用 单选

    classData是接口请求的数组 如果picker显示的值是[object,object]这样的 range-key=\\\"className\\\" range-key就是重点 修改成你要显示的字段

    2024年02月12日
    浏览(41)
  • 微信小程序遇到的一些问题及解决方法(设备安装)

    1)、byte数组 2)、将byte数组转换为字符串 3)、将字符串转换为byte数组 4)、在Vue中使用byte数组。例如,我们可以使用axios发送包含byte数组的POST请求 1)、路由传参 2)、本地缓存传参 3)、全局变量传参 4)、URL传参 Viewer 下载地址: Viewer gitee Viewer github 1)、拿到所有节点 var zTree =

    2024年02月09日
    浏览(46)
  • 微信小程序picker组件–省市二级联动及其回显

    1. 在wxml文件中添加picker组件 2. 在js文件中定义region变量,并在onLoad函数中初始化 3. 在onLoad函数中获取用户已选择的省市区信息,并将其赋值给region变量 )

    2024年02月08日
    浏览(41)
  • 微信小程序调用本地http接口设置以及django 遇到的csrf 403错误解决方法

    1) 如果微信小程序需要和本地localhost端口进行通信联调。首先需要设置微信小程序为 ”不校验合法域名…“设置,这样就可以跳过域名安全检测,不然会出现网站不在安全名单内: 2)此时调用之后,后端会出现如下错误: 这是因为:在微信小程序端对Django后台进行POST请求

    2024年02月07日
    浏览(58)
  • 【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2023年04月16日
    浏览(48)
  • 微信小程序使用mp-html遇到的问题并解决

    1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具--构建npm 然后就报错了 于是搜索到以下的内容: 没有找到可以构建的NPM包,请确认需要参与构建的npm都在 `miniprogramRoot` 目录内 --- 微信小程序报错 https://blog.

    2024年02月07日
    浏览(43)
  • 微信小程序 picker-view 组件构建一个上下拖动选择器

    picker-view是官方的一个选择器组件 支持多级选择 当然也可以单项选择 我们先来看看是个什么东西吧 简单写一个 wxml代码 js定义一个事件 然后 界面效果就是这样的 我们可以鼠标往上拖 例如 我们第二个选择B 当我们鼠标拖动后 松开那一刻 pickerChange就会触发 他会给你一个数组

    2024年02月08日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包