微信小程序、uniapp选择器,包含一级,二级级联,三级级联(附源码)

效果预览:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

已知问题:
不能与页面下拉一起使用
滑动选择后,scroll-view指定scrollTop时,scrollview滚动会有500ms左右的延迟(官方help),现在加了个loaing

参数说明:
show(类型:Boolean,默认 false):控制组件显示隐藏

list(类型:Array):选择器绑定的数据

type(类型:Number,取值1,2,3):选择器类型 1为一级选择 2为二级级联选择 3为三级级联选择

name(类型:String,默认:‘name’):选择器显示的文本信息,为list中的某个key

children(类型:String,默认:‘children’):级联选择器中下级选择器从上级选择器获取数据时所使用的key,为list中的某个key

callBackFun:回调方法,回调参数类型:Array,一级选择器确定后的回调值为Array[0],Array[0]为所选项的Object
二级选择器确定后的回调值为Array[0,1],Array[0]为所选第一项的Object,Array[1]为所选第二项的Object
三级选择器确定后的回调值为Array[0,1,2],Array[0]为所选第一项的Object,Array[1]为所选第二项的Object,Array[2]为所选第二项的
Object
详细使用方法见demo

源码截图:

在这里插入图片描述

说明

如果本项目对您有帮助,欢迎 “点赞,关注” 支持一下 谢谢~

源码获取关注公众号「码农园区」,回复 【uniapp源码】
在这里插入图片描述

  • 11
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
UniApp是一款跨平台的开发框架,可以使用Vue.js语法编写一次代码,同时生成可运行在多个平台的应用程序。在UniApp中,我们可以使用多选选择器来实现多选功能。 多选选择器是一种用户界面元素,用于展示一组选项,并允许用户选择多个选项。在UniApp中,可以使用uni-choose组件来实现多选选择器。使用uni-choose组件时,需要在数据中定义一个数组,用于存储选项的值和显示文本。然后通过v-for指令遍历数组,在选择器中显示选项。 当用户选择一个或多个选项时,可以使用v-model指令将选项的值绑定到一个变量上。这样,当用户选择或取消选择一个选项时,绑定的变量会发生相应的变化。我们可以根据变量的值来判断用户的选择,并实现相应的业务逻辑。 除了基本的多选选择器外,UniApp还提供了一些扩展的功能,如设置最大可选数量、指定默认选中项、自定义样式等。我们可以根据项目的需求使用这些功能,实现更加灵活和个性化的多选选择器。 需要注意的是,不同平台对多选选择器的样式和交互可能存在差异。我们在开发时,需要根据目标平台的特点,进行适当的调整和兼容。同时,为了提高用户体验,我们还可以针对不同平台,定制不同的交互和视觉效果。 总而言之,UniApp提供了方便易用的多选选择器组件,可以帮助我们快速实现多选功能。通过学习和使用UniApp的多选选择器,我们可以提升应用的用户体验,满足用户的不同需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦之归途

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值