Uniapp: 下拉选择框 ba-tree-picker

于 2025-04-14 14:12:52 发布
阅读量1.4k 收藏 6
点赞数 29
分类专栏： UniApp 文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jhgfvjfggff_fds_f/article/details/147215114
版权
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Uniapp: 大纲
MMF博客园
04-14 502
Uniapp: 大纲
uni-app——下拉框多选
Tianxiaoxixi的博客
08-04 1万+
uni-app——下拉框多选
uniapp开发小程序，制作选择下拉框（经验少，做的不完美）
qq_45751819的博客
09-27 3086
1、默认样式（默认选择第一条数据）2、点击后默认展示10条数据。
uni-app下拉框实现
12-18
uni-app下拉框实现，纯原生写法
uni-app 自定义下拉选择列表
热门推荐
yyxhzdm的博客
09-26 2万+
效果图： 1.自定义组件ChoiceSelected.vue 2.组件代码： <template name="ChoiceSelected"> <!-- 自定义下拉选择框 start--> <view class="selected-all"> <view :class="isShowChoice ? 'drop-down-box-selected' : 'drop-down-box'" @click="btnShowHid...
uniapp 下拉框
长春小佛爷的博客
10-15 5647
{{index==-1?'--请选择--':cou
uniapp下拉选择组件
abs625的博客
05-11 7552
uniapp下拉选择框
Element-UI自学实践（一）
weixin_40017062的博客
08-13 488
Element-UI自学实践
Element-UI组件之表单Form
TwentyOne__的博客
07-03 5722
Element-UI组件之表单FormRadio 单选框基础用法禁用状态单选框组按钮样式带有边框Checkbox 多选框基础用法禁用状态多选框组indeterminate 状态可选项目数量的限制按钮样式带有边框Input 输入框基础用法禁用状态可清空密码框带 icon 的输入框文本域可自适应文本高度的文本域复合型输入框尺寸带输入建议自定义模板远程搜索输入长度限制 Radio 单选框 基础用法 &...
uni-app下拉实例模板
04-04
uni-app的点击下拉实例模板，非常好用，可以放心使用。
uniapp微信小程序 --下拉菜单
apple_70049717的博客
01-21 5664
uniapp微信小程序下拉菜单
uniapp 下拉多选框
m0_73199810的博客
06-14 1807
u-input disabled v-model="formData.fishName" placeholder="请选择主要生物对象"<u-form-item label="主要生物对象" label-width="250">
uniapp实现下拉多选框
m0_70337053的博客
07-28 1万+
uniapp实现封装下拉多选组件
uni-app 自定义下拉框
xxx121324的博客
09-14 5228
uni-app实现下拉选择框
uni-app select下拉选择框
qq_52244923的博客
03-03 3864
uni-app select下拉选择框
uniapp下拉框组件
WeiflR10的博客
09-20 6967
之前写过一个小程序的，引入单个下拉框是没有问题的，但是一个页面引入多个下拉框组件的话就会有bug，比如可以同时展开多个下拉框的问题，在此修复了。如果大家有什么好的办法可以告诉我一下嘛~如果想在js中输出this.isjiantou0 this.isjiantou1 this.isjiantou2 ...，可以使用模板字符串。
uniapp 自定义下拉框
m0_47559177的博客
03-17 4270
根据 https://gitee.com/kcren/uniapp-dropdown-filter/tree/master自己加了一层封装 可以进行切换选择下拉内容模板 在components下创建ren-dropdown-filter/ren-dropdown-filter.vue图标的引用 和颜色 可以自己进行修改请选择{{ navData[actNav?
uniapp下拉选择框单选多选
最新发布
02-25
### UniApp 下拉选择框实现单选和多选功能 #### 使用 `picker` 组件实现下拉选择框的单选功能 在 UniApp 中，可以通过内置的 `picker` 组件来轻松实现下拉选择框的功能。对于单选模式，配置相对简单。 ```html <template> <view> <!-- 单选 --> <picker mode="selector" :range="array" @change="bindPickerChange"> <view class="picker"> 当前选择：{{ array[index] }} </view> </picker> </view> </template> <script> export default { data() { return { array: ['选项1', '选项2', '选项3'], index: 0, }; }, methods: { bindPickerChange(e) { this.index = e.detail.value; } } }; </script> ``` 此代码展示了如何通过 `picker` 组件设置一个简单的单选下拉菜单[^1]。 #### 实现带有多选功能的选择器 为了支持多选操作，在 UniApp 中通常会采用更复杂的逻辑处理方式。下面是一个带有底部弹出样式并允许用户进行多选的例子： ```html <template> <view> <!-- 显示已选中的项 --> <view v-for="(item, idx) in selectedItems" :key="idx">{{ item }}</view> <!-- 打开多选对话框按钮 --> <button type="default" @click="showMultiSelector">打开多选</button> <!-- 底部弹出层用于展示所有可选项 --> <uni-popup ref="popup" type="bottom"> <scroll-view scroll-y style="height: 300px;"> <checkbox-group @change="multiSelectChange"> <label v-for="(option, i) in options" :key="i"> <checkbox :value="option" :checked="selectedItems.includes(option)" /> {{ option }} </label> </checkbox-group> </scroll-view> <button @click="confirmSelection">确认</button> </uni-popup> </view> </template> <script> import uniPopup from '@/components/uni-popup/uni-popup.vue'; export default { components: { uniPopup }, data() { return { options: ['苹果', '香蕉', '橙子'], // 可供选择的数据列表 selectedItems: [], // 用户已经选择了哪些项目 }; }, methods: { showMultiSelector() { this.$refs.popup.open(); }, multiSelectChange(event) { const values = event.detail.value; this.selectedItems = [...values]; }, confirmSelection() { console.log('最终选定:', this.selectedItems); this.$refs.popup.close(); } } }; </script> ``` 这段代码实现了当用户点击“打开多选”按钮时，从页面下方滑动出来的窗口中可以选择多个条目，并且这些被选中的条目会在界面上实时更新显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Monly21

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

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

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

打赏作者

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

抵扣说明：

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

余额充值