uni-app内置组件picker-view和uni-popup的使用注意事项

已于 2023-06-08 16:07:08 修改
阅读量4.8k 收藏 9
点赞数 2
文章标签： uni-app 前端框架
于 2023-06-02 17:19:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60605042/article/details/131010064
版权
本文介绍了uni-app中picker-view组件相比于picker的灵活性，并详细讲解了其结合uni-popup在单列和多列选择场景的应用。在使用picker-view时，需要注意在特定苹果机型上uni-popup可能出现的显示问题以及uni-popup输入框的历史数据遗留问题，并提供了相应的解决方案。
摘要由CSDN通过智能技术生成

picker-view使用

1.picker-view比picker使用更加灵活。以下是picker-view结合uni-popup的使用场景（单列，多列）。

 2.使用方式：

参考说明：uni-app的官方文档   picker-view | uni-app官网

单列使用

<uni-popup ref="noTimeselectDialog" type="dialog"  class="selectDialogBox" :maskClick="false" :isMaskClick="false" :close='NOTIMEcloseUnit'>
	<view  class="selectBox">
		<view class="selectTitle">
			<text class="cancel" @click='NOTIMEcloseUnit'>取消</text>
			<text class="title">{
  {'选择'+popupTitle}}</text>
			<text class="ok cancel" @click="onClickConfirmUnitNOtime">确定</text>
		</view>
		&l
最低0.47元/天 解锁文章
奔向风筝的少年
关注
uniapp使用picker-view组件实现选择器可进行搜索
qq_52065282的博客
03-15 1万+
效果图：1、使用uniapp自带的picker-view组件实现2、在父组件中使用。
uniapp picker-view嵌入页面的滚动选择器(地区版 省市区三级联动）
weixin_51867622的博客
02-05 3546
//这里使用了插件市场的组件pcaPicker （组件的代码放在最后了） 连接：pcaPicker - DCloud 插件市场 1.引入组件 注册组件 使用组件 import pcaPicker from '@/components/pcaPicker/pcaPicker.vue' components: { pcaPicker }, <pcaPicker ref="pcaPicker" @confirm="getPCA01">&lt...
微信小程序之表单组件二
最新发布
xlsw_的博客
09-21 301
一、picker-view组件 1.补充：与picker区别：picker是在页面上通过点击来触发一个选择器来让我们进行选择，选择完成之后再关闭，而picker-view其实是一个视图组件，嵌入到我们当前页面中去，是不会消失的。 2.功能： 3.属性： 二、radio组件：单选项目（简单） 三、slider组件：滑动选择器 作用：将图片调色，亮度，对比色，或者将图片放大缩小。 补充：bindchange和bindchanging有些相同，上述效果
【uniapp】picker-view选择器的使用
每天进步一点点, 靠近小目标一点点~
03-06 5316
前文在picker使用的帖子介绍到, 需要做一个医院下拉选择的一个功能, 因为长久没用, 忘记了picker和picker-view的使用, 因为picker弹框的样式是自带的, 且无法更改样式, 插入到项目很不友好, 于是把组件替换成picker-view
uni-app的picker-view组件的使用
lannieZ的博客
12-05 9940
<!-- 遮罩层 --> <view class="mask" v-show="mask"></view> <!-- picker-view组件按钮 --> <view class="pickerBtn" v-if="pickerBtns"> <view class="cancer" @click="cance...
微信小程序--uni-app中使用picker-view
努力的nana
09-07 1320
1.直接在template中写： // 直接显示选择的数据 // value 表示当前选中的项，change方式用于进行更改选中的项 <picker-view :value="value" @change="bindChange" class="picker-view"> // moreList表示要循环的数组 <picker-view-column> <view class="item" v-for="(item,index) in moreList" :key="i
uniapp的picker组件demo
记录本人工作中遇到的问题、经验总结以及分享。
06-06 2031
【代码】uniapp的picker组件demo。
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
增强uni-app的uni-picker-view组件（添加搜索和禁选功能）
swiftlinlei的博客
12-10 4771
1、组件文件如下： <template> <view> <view> <!-- 普通弹窗 --> <uni-popup ref="popup" background-color="#fff" @change="change"> <view> <view> <uni-row> <uni-col :span="6"> .
uni-app微信小程序单个页面横屏以及使用uni-datetime-picker、popup出现弹窗后还能滚动页面的问题
D浩DzD的博客
06-28 2127
uni-app微信小程序单个页面横屏以及使用uni-datetime-picker、popup出现弹窗后还能滚动页面的问题。catchtouchmove以及pageOrientation属性
基于picker-view的日期选择器
03-22
基于picker-view的日期选择器，只有年月日选择，uni-app自带的组件不适合利用按钮触发调用，该组件可用在uni-popup里，点击按钮获取
使用uniapp中picker-view封装底部选择弹框选择器，解决微信小程序中不可自定义样式问题
05-19
使用uniapp制作微信小程序时候，需要一个城市选择框，但是微信中的弹框样式不可自定义，出现了与项目主题样式不一致问题，于是使用uniapp中picker-view封装底部选择弹框选择器，实现支持自定义确定和取消按钮颜色字体大小等功能，解决微信小程序中不可自定义样式问题，
《uni-app》表单组件-Picker组件
Oliver尹的博客
09-11 6214
picker，选择器组件，该组件为一个复合组件，它内置了 五种选择器，分别为：普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器； 选择器在表单组件中同样属于使用频率非常高的一种，常见的业务场景包括，注册时的地区选择，日期选择，时间选择等等；
uniapp的picker控件
Tennyson_261的博客
02-14 456
遇到的问题： 如果日期选择器只选择年，或者年月，加一个fields="year"或者fields=“month” ，在电脑浏览器上测试ok，但是，安卓端真机还是年月日，ui界面还变成了手机端特有的样式。 解决方式： 还是使用默认的model模式，年份动态生成为数组，然后绑定。 ...
uni-app——picker组件的用法、时间、日期、地区选择器等
On the way
04-26 4499
1、uniapp–picker组件 <template> <view class="signUp"> <view class="signUp_dv1"> <u-form :model="form" ref="uForm" label-width="95px"> <u-form-item label="日期" :required="true"> <u-input v-model="form.applicantDat
uni-app 之选择器
weixin_71273777的博客
01-19 2404
组件：<picker></picker>从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
【picker-view】uniapp实现带有搜索框的选择器
AAAXiaoApple的博客
09-16 3282
【picker-view】uni实现带有搜索框的选择器。
uniapp(uni-app)picker组件使用，自定义三列数据，三级联动，开箱即用
m0_71585401的博客
11-21 2293
uniapp(uni-app)picker组件使用，自定义三列数据，三级联动，开箱即用
UNIAPP----picker组件的简易使用
weixin_44126737的博客
07-31 1592
直接上代码： HTML： <template> <view> <view class="first"> <image src="../../static/back_right.png" mode=""></image> <text style="position: absolute;left: 30rpx;top: 30rpx;font-size:28rpx;color: #646464;">商品类型</t
uni-picker-view组件
07-27
引用\[1\]中的代码是关于uni-popup和uni-picker-view组件的使用示例。这段代码展示了如何创建一个弹出框，并在弹出框中使用picker-view组件来选择单位。在这个示例中，picker-view组件的值是通过bindChange方法来获取的，同时还使用了immediate-change属性来实现立即执行。\[1\] 引用\[2\]提到了一个关于uni-datetime-picker组件在苹果手机上的bug。问题的原因是在scroll-view中使用了uni-datetime-picker组件。解决办法是将uni-datetime-picker的最外层scroll-view元素改为普通的view，并在最外层view的css中加上overflow-y: scroll。这样可以解决在苹果手机上的显示问题。\[2\] 综上所述，uni-picker-view组件是一个用于选择器的组件，可以在uni-app中使用。它可以用于创建各种类型的选择器，如日期选择器、时间选择器等。在使用uni-picker-view组件时，可以通过bindChange方法来获取选择的值，并可以使用immediate-change属性来实现立即执行。同时，需要注意在使用uni-datetime-picker组件时，避免将其放在scroll-view中，以免出现显示问题。 #### 引用[.reference_title] - *1* *3* [uni-app内置组件picker-view和uni-popup的使用注意事项](https://blog.csdn.net/m0_60605042/article/details/131010064)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp中uni-datetime-picker组件被scroll-view组件遮掩问题](https://blog.csdn.net/qq_51741194/article/details/128254883)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值