uni-app中picker相关坑

偏执的太偏执、 2022-12-04 09:15 103阅读 0赞

### 数据格式如下： ###

array: [{
                        id:'111',
                        category_name:'水果'
                    },{
                        id:'222',
                        category_name:'222'
                    }],

### 1、数组picker 的显示 ###

<picker @change="bindPickerChange" :value="index" :range="array"  :range-key="'category_name'">
                                <label class="uni-input">{
       {array[index].category_name}}</label>
                            </picker>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

### 2、获取选中值得id，代码如下： ###

bindPickerChange: function(e) {
                    this.index = e.target.value   //取其下标
                    var selected = this.array[this.index]           //获取选中的数组
                    var category_id = selected.id          //选中的id
                },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221123/d9651603e2e644dcabe8d81f8d1b7790.png

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关关于uniapp的picker的使用

最近入职的一家公司是基于uniapp开发app的，很多东西不懂，最近遇到一个关于picker选择的问题要求二级联动，左边选择省份，右边选择市 ![在这里插入图片描述][2

￡神魔★判官ぃ/ 2023年07月25日 14:01/ 0 赞/ 66 阅读

相关 mint-ui之picker爬坑记

[mint-ui之picker爬坑记][mint-ui_picker] picker的数据来源为动态获取时，数据无法正常渲染！因为方法不对，所以坑大了！深刻地体会到’业不

╰+攻爆jí腚メ/ 2023年02月13日 11:37/ 0 赞/ 70 阅读

相关 uniapp中popup组件中的使用以及坑

实现效果：点击实现弹出层 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

系统管理员/ 2023年01月02日 03:19/ 0 赞/ 2877 阅读

相关 uniapp picker组件实现二级联动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朴灿烈づ我的快乐病毒、/ 2022年12月29日 09:55/ 0 赞/ 724 阅读

相关 uni-app中picker相关坑

数据格式如下： array: [{ id:'111', categ

偏执的太偏执、/ 2022年12月04日 09:15/ 0 赞/ 104 阅读

相关 uniapp picker踩坑range-key失效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

谁借莪１个温暖的怀抱￠/ 2022年12月01日 14:10/ 0 赞/ 328 阅读

相关 uniapp滚动选择器 picker

从底部弹起的滚动选择器 picker > 支持五种选择器, 通过mode来区分, 分别是普通选择器(selector), 多列选择器(multiSelector), 时间

小鱼儿/ 2022年11月27日 02:00/ 0 赞/ 780 阅读

相关 uniapp 页面跳转的坑

uniapp 页面跳转的坑我们在使用 uniapp 的时候，经常使用到页面跳转，uniapp 的几个常用跳转我就不一一列表了。我就说我遇到的坑吧如下图，我要从

川长思鸟来/ 2022年11月20日 05:59/ 0 赞/ 418 阅读

相关小程序使用Picker遇到的坑

平时用picker大多是用时间,今天要用到普通选择器。官网代码也写的很清楚： <picker bindchange="bindPickerChange" valu

以你之姓@/ 2022年04月03日 07:52/ 0 赞/ 626 阅读

相关 uniapp中的picker选择器

目录一、普通选择器二、多列选择器三、时间选择器四、日期选择器 -------------------- 一、普通选择器 ![2021030621

心已赠人/ 2021年07月25日 15:56/ 0 赞/ 4058 阅读