【底部弹出-选择器】uniapp Picker组件——底部弹起的滚动选择器

已于 2022-07-01 17:00:29 修改
阅读量4.8k 收藏 7
点赞数 1
分类专栏： uniapp 文章标签： 前端 javascript vue.js
于 2022-07-01 16:58:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48596030/article/details/125560516
版权

一、要实现的效果，如下图所示：

在这里插入图片描述

在这里插入图片描述

二、代码：

<template>
	<view>
		//mode ： selector是最普通的选择器，[具体可参考文档。](https://uniapp.dcloud.io/component/picker.html)
		//range  ：想绑定的数组。
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小跳不会Coding
关注
专栏目录
订阅专栏
uniapp如何实现底部弹出选择框
m0_60708088的博客
05-19 4230
性别、班级、日期
uniapp,小程序或APP的底部弹出的滚动选择组件picker，三级联动，选择地址
m0_54816834的博客
03-21 678
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】解视频】](https://bbs.csdn.net/topics/618166371)**
uniapp uni-popup底部弹框留白 底部颜色修改 滚动穿刺
最新发布
青杉旧故°的博客
08-29 614
uni-popup底部弹框留白 底部颜色修改 滚动穿刺
uniapp组件 从下方弹出进行选择
qq_56995244的博客
07-24 2246
4.使用组件，我这里是在循环内使用的组件，不是在循环内的话，打开弹窗时不需要[0]，this.$ref.xxx.open()就行。1.首先自定义一个components文件夹存放所有自定义组件，右键文件夹新建组件，使用默认模板就行。2.可以根据想要的效果在当前页面写好，例如我写的就是选择部门的一个组件，是一个显示在下方的弹窗组件。直接放代码，通过props、mode和watch内定义，引用组件时可直接使用v-model绑定。其他: 当前也可以使用传进去的值进行选择，组件如下。3.进行全局注册（或局部注册）
uniapp实现底部弹出菜单选择
那些免费的砖
09-07 1487
【代码】uniapp实现底部弹出菜单选择。
uniapp开发微信小程序底部地区选择弹框
次顶级的博客
08-14 1055
（自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面）直接上代码模板部分（利用uniapp中的picker-view进一步封装）different方法判断数组中某个值的改变下标。以上 👆 是个人前端项目，欢迎提出您的建议😊。以上 👆 是个人前端项目，欢迎提出您的建议😊。SubTopH前端开发个人站。javaScript部分代码。
uni-app - 弹出框
weixin_54721820的博客
11-21 9164
弹出框让我们在需要时在屏幕底部弹出一个菜单，它通常用于在各种应用程序中进行选择操作。Uniapp为我们提供了基本的底部弹出框组件，但它也有一些自定义功能。弹出框组件由两个主要组成部分组成：触发元素和弹出框。触发元素通常是一个按钮或其他形式的UI元素，它与弹出框逻辑相互作用。弹出框是一个以弹出方式显示菜单项的UI元素集合。
使用uniapp中picker-view封装底部选择弹框选择器，解决微信小程序中不可自定义样式问题
05-19
使用uniapp制作微信小程序时候，需要一个城市选择框，但是微信中的弹框样式不可自定义，出现了与项目主题样式不一致问题，于是使用uniapp中picker-view封装底部选择弹框选择器，实现支持自定义确定和取消按钮颜色...
基于Vue和Element UI的图标选择器组件设计源码 - e-icon-picker
05-29
本源码提供了一个基于Vue和Element UI的图标选择器组件的设计。项目包含120个文件，其中包括48个SVG文件、27个JavaScript文件、12个Vue文件、3个JSON文件、3个CSS文件、3个TypeScript文件，以及用于配置和资源的文件...
uniapp用picker日期选择器不是从底部弹起
weixin_48156583的博客
11-08 2132
uniapp用picker日期选择器不是从底部弹起,我是在app里使用的，直接复制uni官方文档的代码，运行效果如下。fields="month" //选择器显示是年月。fields="day" //选择器显示是年月日。fields="year" //选择器显示是年。在app端调用的是os的原生日期选择控件。其实文档里有写，怪自己使用时没仔细看。所以想要从底部弹起的效果，需要配置fields参数。，fields可选值如下。
微信小程序-自定义从底部弹起的滚动选择器
10-12
在微信小程序中，为了提供丰富的用户交互体验，开发者往往需要实现各种自定义组件，其中就包括了从底部弹起的滚动选择器。这个自定义组件在许多场景下都非常实用，比如设置选项、日期选择等。 1. **自定义标题** ...
底部弹出选择器
11-23
仿IOS底部弹出滑动选择器，单项选择，时间选择，日期选择，地区选择，城市选择，联动选择
uniapp小程序底部弹出窗口
qq_44242030的博客
04-25 3178
实现效果： 父组件： <Screen :show='showS' :list="serviceList" @close="close"></Screen> import Screen from '@/components/service' data(){ return { showS:false, list:[] } } methods:{ getShow(){ this.showS=true }, close(e) { this.showS = e }, }
uniapp的底部弹出层实现保姆式教程
qq_33267306的博客
05-06 2437
uniapp的底部弹出层实现保姆式教程
uni-app app底部弹出窗
HXH_csdn的博客
11-21 4584
vue页面代码 <Screen :show='show' @close="close"></Screen> //还有一个点击事件,将show=true close(e) { this.show = e }, 子组件代码 <template> <view class="container" v-show="hideModal"> <view class="mask" @touchmove.stop.prevent @click="close().
uni-app 组件使用 底部弹框
Libertied的博客
09-03 3803
<template> <view> <view class="cover_screen" @click="hideBuyModal" v-if="showModalStatus"></view> <view class="buy_box" v-if="showModalStatus"> <text class="title">{{title}}</text> <text class="newde.
uniapp底部弹出框的实现
m0_52611940的博客
05-26 2054
uniapp底部弹出框的实现
uniapp添加自定义底部弹出框
IT水很深，路还很长
03-10 3006
<template> <view class="wrap"> <view @tap="showModal"> <text>{{value}}</text> <icon class="arrow"></icon> </view> <!-- modal --> <view class="modal modal-bottom-dia.
uni-app 底部滚动选择器
hjp9999527的博客
06-23 231
后台查出数据，json传递。
uniapp拦截picker选择器弹出
05-04
你可以使用 `beforeShow` 事件来拦截 `uniapp` 中的 `picker` 选择器弹出。 示例代码如下： ```html <view class="select-btn" @tap="showPicker">点击选择 <picker :range="{{array}}" v-model="index" @...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值