小程序 picker 多级联动，Array数据动态改变后，picker展示的内容没有改变

最新推荐文章于 2024-07-04 12:03:06 发布
最新推荐文章于 2024-07-04 12:03:06 发布
阅读量4.1k 收藏 1
点赞数 2
分类专栏： 小程序 文章标签： picker 多级联动 小程序 picker 小程序 多级联动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/young_gao/article/details/86537613
版权

先说下我的遭遇

我在做picker多级联动的时候，动态改变了 array 里面第 3 列数组值

然而理想中 picker 第 3 列改变的现象并没有发生

后来比对官方的实例，发现官方示例中除了改变了 array ，还改变了 indexArray

所以我意识到自己可能出现的错误就是没有设置 indexArray

在我改变了 indexArray 后期待的显示效果就正常了

 

总结：

设置 picker 多级联动一定要同时设置  array 和 indexArray  ，缺一不可

 

Young_Gao
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序中如何实现省市区街道四级地址级联选择
穆雄雄的博客
10-30 1668
微信小程序中支持省市区地址级联吗？微信小程序中的地址级联最多支持到几级？今天，我们就来看看，微信小程序中的地址级联的使用，以及一些坑…希望大家看完之后能避免踩坑啊。
微信小程序_动态生成picker选择器后做改变picker值操作后互不影响
miracle__Y的博客
12-03 3931
需求描述： 通过请求后端接口，获取到数据源（json格式，数组），使用小程序wx:for循环遍历，对接口返回的数组中的一个字段存为picker组件选择器，并允许用户进行选择修改该值。 问题描述： 在使用wx:for循环时，picker选择器修改值操作直接使用this.setData({index:e.detail.value})的方式进行修改保存，使用这种方式就会出现picker选择器渲染完...
uniapp picker 多列数据不更新问题
追梦猪的博客
08-20 4675
Uni-app 官方实例里的 多列选择器picker 在设置数据的时候我们是动态改变的发现，this.value[0] = [数组内容]，发现picker里的内容没有改变，很是苦恼，这样难道不对吗，然后追梦猪找到官方文档，如下//这种方法是错误的this.value[0]=[数组...
uniapp二级联动自定义
最新发布
Jane0129的博客
07-04 224
这里附上我的处理方式,我的数据是从两个接口获取的,需要拼接一下。在此基础上,我改成了组件,在父组件请求数据,传递到组件。首先拿到数据处理成这样的数据格式。
省市区三级联动taro多列选择器
SNC8F的博客
11-05 5729
import Taro, { Component, Config } from '@tarojs/taro' import { View, Picker } from '@tarojs/components' import './index.scss' import address from '../../utils/city' export default class Index extend...
微信小程序----修改data中的数据，页面数据不改变
热门推荐
止于至善
12-26 7万+
错误原因 由于VUE等框架，我们在逻辑层修改data中的数据后，视图层（页面渲染）会跟着发生变化。当然微信小程序也是实现了相同的功能，那么出现错误的原因是什么？答案：微信小程序的setData()方法。 常见赋值方式（习惯）导致的错误Page({ data: { isShow: false }, changeStatus(){ console.log(this.dat
vant的picker组件数据更新时视图却没有更新
weixin_42180591的博客
12-03 1346
vant的picker组件数据更新时视图却没有更新
微信小程序 自定义picker封装成插件实现二级三级四级联动
ranshakalove的博客
06-27 1493
微信小程序 实现 自定义picker 封装插件 实现二级三级四级联动
微信小程序多级联动第一次进入无法触发bindcolumnchange，导致联动失败
梁雨季™的博客
12-30 942
问题：真机测试，自定义的多级联动进入页面第一次选择无法触发bindcolumnchange，导致联动失败， 第二次选择时则有可以了。 原因：value的值不对！ value array [] 表示选择了 range 中的第几个（下标从 0 开始） 注意⚠️：这里为三级联动，所以multiIndex为数组[0, 0, 0] <picker mode="multiSelector" bindcolumnchange="bindMultiPickerColumnChange"
微信小程序多项选择器_微信小程序三级联动之多列选择器
weixin_39794340的博客
12-19 1310
有些时候，三级联动业务场景并不只是全国地区选择，可能还涉及到自定义分类的三级联动，这时就需要使用微信的多列选择器。如果只是一列字段，或者每次拖动一次都去服务端取，会比较容易。 如果想一次定义好json,关联数据相对比较复杂，此案例json结构如下：WX20170926-150637@2x.png效果如下image.png这种.png实现过程1.WXML(这是一段微信官方文档的代码)普通选择器当前选...
uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip
12-17
uni-app是一个多端统一的开发框架，它可以将同一份代码编译到iOS、Android、H5、小程序等多个平台。Picker组件是uni-app提供的一种UI控件，用于显示一个可滚动的选择列表，通常用于日期选择、时间选择或自定义数据...
WeUI picker 如何动态设置defaultValue
wsxc451的专栏
12-30 8245
WeUI picker 如何动态设置defaultValue 我这里做的是四色球的设计.每次点击随机生成一注,发行defaultValue不会自动变化,看到源码发行 他们使用了temp[option.id]缓存了上次的defaultValue,导致,动态设置defaultValue 不会自动渲染; 所以我们让id每次都不同,那么,他就没有缓存了.每次defaultValue更改,都会及时...
微信小程序 picker-view组件的默认显示值不改变
weixin_30687811的博客
07-15 1893
注意：这里只讨论只使用一个 picker-column 的情况，多个picker-column的情况并不相同。 情况： 　　picker-view嵌套在一个弹层上，每次弹出都会选中默认显示值。赋值给 value 的值是 index 或者 [index]，修改index的值（index是索引值），picker-column的默认显示值不会跟着改变。 问题所在： 　　赋值给 value 的类型...
微信小程序 picker标签实现动态时间选择器与地区选择器
Dragon
09-28 610
微信小程序picker标签实现动态时间选择器与地区选择器： 运行效果如下： wxml代码如下： <picker mode="date" bindchange="changeDate">{{date}}</picker> <picker mode="region" bindchange="changeRegion">{{region}}</picker> js代码如下： Page({ data: { date:'选择日期器', ..
小程序踩坑：小程序picker组件不管用，渲染有问题，二级三级联动数据错乱，三级联动不生效
qq_39498450的博客
04-23 3266
小程序踩坑：picker组件不管用，不生效 最近公司开发的小程序中，用到了小程序的picker组件，写了个三级联动，发现部分数据加载错乱，一步步打断点调试自己的程序，发现程序代码都没有问题。就是不知道为何，部分数据错乱，然后有很多项却没问题。每次滑动经过某两项时，会导致picker组件有问题。但是不经过那几项时，有没问题。这让我很是头疼。不知道大家有没有遇到这样的问题。 经过大量测试，耗费我一上...
uniapp关于uview-ui中u-picker（picker-view）快速滚动点击确定错误
weixin_45930427的博客
08-25 837
首先我们要知道，uview-ui中的u-picker底层也是使用。中集成的picker-view。
支付宝小程序 使用uView实现省市区三级联动的坑
烊烊的博客
03-16 2287
第一次使用uView就遇到了坑！！
UIPickview 省市联动注意点（如何防止同时两组或多组滑动时，数组越界问题）
tiny19920911的博客
02-17 2123
#import "ViewController.h" #import "PREProvince.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIPickerView *provinceView; @property (weak, nonatomic) IBOutlet UILabel *province
记uniapp picker 坑
weixin_43358822的博客
08-02 1665
uniapp 默认 value值不生效
vant picker 多级联动操作
05-10
Vant picker 多级联动操作是指在 Vant UI 组件库中的 picker 组件中，可以通过多个级别的选择器来联动选择数据，从而达到更加准确的筛选和选择目的。这种多级联动操作在实际应用中非常常见，可以用于地区选择、商品分类、日期选择等场景。 Vant picker 多级联动操作的实现步骤一般是：首先需要在 HTML 代码中添加 picker 组件并设置相应的属性，如 picker-options、columns 等。然后在 JS 代码中编写数据源和联动的逻辑，一般采用数组或 JSON 格式的数据存储，通过监听选择器的 change 事件来实现级联选择效果。最后，还需要根据选择结果来进行相应操作，如显示选择结果、修改相关数据等。 与传统的单一选择器相比，Vant picker 多级联动操作具有以下优点：首先，可以通过多个级别的选择器来筛选需要的数据，精度更高。其次，多级联动操作可以让用户更加方便快捷地选择数据，提升用户体验。同时，多级联动操作可以应用到很多不同的场景中，如地区、时间、分类等，具有很广泛的应用价值。 在实际开发中，如何灵活合理地应用 Vant picker 多级联动操作也变得十分关键。需要根据实际业务需求和用户体验来进行设置，防止出现数据选择错误或操作繁琐的问题。因此，需要在开发前进行需求分析和用户调研，结合 Vant picker 多级联动操作的实现原理和技巧，使得应用的多级联动效果更加出色。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值