解决uniapp uni-datatime-picker的小尺寸扫码设备屏幕适配问题

最新推荐文章于 2024-06-03 10:40:56 发布
最新推荐文章于 2024-06-03 10:40:56 发布
阅读量1.3k 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyz246859/article/details/122918254
版权

uniapp官方的日期选择组件，屏幕只支持到4.7寸以上的也就是手机上，但是却忽略了一些屏幕更小的扫码设备，它们的屏幕更小，点击日期组件的时候，弹出的选择框大到超出屏幕，无法选择到所有日期，英寸需要针对扫码设备的小尺寸屏幕额外做适配：
在这里插入图片描述
只是样式的问题还是很好解决的，只是提醒大家在小尺寸的设备上用uniapp的组件时，要多注意这些小问题，不要忽略造成不好的用户体验

lyz246859
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【uniapp】使用扫码插件，解决uni.scanCode扫码效率低的问题
m0_67394360的博客
03-06 5460
1. 背景 uniapp 中自带的二维码扫描的 API 是 uni.scanCode，但有如下问题： 二维码扫描的效率不高，有些需要扫2秒左右 较小或模糊的一些二维码无法识别出来，多次扫同样的一个码可能出现扫码失败的情况 受环境影响大，比如光线暗时识别率低 若二维码中间放置了自定义 logo，有一定概率无法识别到该二维码 uniapp 官方文档也提到： App的扫码引擎，使用业内开源的通用扫码库，扫码效率比不过微信、支付宝等商业扫码库。 故推荐使用支付宝扫码插件：https://ext.dcloud
vue-persian-datetime-picker:一个Vue插件来选择Jaalali日期和时间
05-02
Vue波斯日期时间选择器 一个Vue插件来选择Jaalali日期和时间在查看文档和演示安装浏览器<... script src =" https://cdn.jsdelivr.net/npm/vue-persian-datetime-picker/dist/vue-persian-datetime-picker-br
uniapp自定义扫码界面
apple_50717761的博客
09-04 404
页面很简单这是一个nvue页面。
uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置
最新发布
weixin_65363325的博客
06-03 605
官网：https://ask.dcloud.net.cn/article/35564。
uni-drawer抽屉下的uni-datetime-picker日期弹窗宽度无法最大化
vidvan的专栏
02-03 844
在uni-app中的uni-drawer抽屉下使用uni-datetime-picker日期选择器时，弹窗宽度无法最大化撑满屏幕。
Uniapp uni-datetime-picker的日历和时间不兼容H5
weixin_51780751的博客
11-21 2332
用的uview组件。 <!-- 设置时间 --> <view> <label><text style="display: block; font-size: 13px; margin-bottom: 20rpx">开始时间:</text> <view class="rili"><uni-datetime-picker mode="datetime" v-model="beginTime
uniapp HTML5+扫码API自动缩放问题
qq_33758085的博客
04-12 1439
当我在uniapp里调用原生扫码功能 plus.barcode.create()的时候，如果扫的二维码太小的话，它会自动放大焦距，但是又不能手动调小焦距，所以连续扫码的时候很不友好，我想有没有参数能禁止自动放大，官方文档里没有，看网上别人试出来了一个参数 autoZoom，我粗略试了下，好像真的可以。
UniAPP时间选择器uni-datetime-picker调整选择间隔大小
CSDN_DAY_DAY_UP的博客
04-27 621
uni-datetime-picker修改可选时间的步进值
vue3-persian-datetime-picker:这是一个Vue3版本的vue3-persian-datetime-picker
03-16
vue3-波斯日期时间选择器 一个vue3插件选择从杰拉里日期和时间从迁移 运行这个项目 # 安装依赖 yarn # OR npm install # 启动服务 yarn serve # OR npm run serve ...1，VuePersianDatetimePicker.vue：①模型=> ...
3.MySQL培训-数据类型值-datatime
04-08
SQL 2008 入门到精通视频教程 SQL 2008完全学习手册 视频教程 内部培训视频 DBA培训班 全套44集全
解决mysql时间戳datatime存储四舍五入问题.docx
06-11
要解决这个问题，您可以调整DateTime字段的精度，使其能够存储更精确的时间信息。有以下两种方法： 1. **修改字段定义**： 您可以在创建或修改表结构时，指定DateTime字段的精度。例如，使用以下SQL语句： ```sql...
修改扫描框样式的ZXing二维码扫描DEMO
04-22
修改好的扫描DEMO，直接下载就可以用了
uniapp自定义扫码页面
05-17
uniapp自定义扫码页面
boost_date_time-vc120-mt-1_56.dll
02-13
matlab 2016a 由于找不到 boost_date_time-vc120-mt-1_56.dll，无法继续执行代码。重新安装程序可能会解决此问题。
修改二维码扫描框的大小位置
weixin_30544657的博客
03-27 1025
在com.zxing.camera包中找到 //修改这里最小最大值，限制扫描框大小 private static final int MIN_FRAME_WIDTH = 240;//240 private static final int MIN_FRAME_HEIGHT = 240;//240 private static final int MAX_FRAME_WIDTH...
如何修改datetimepicker的日历的显示的宽度
热门推荐
群来群往的博客
10-12 2万+
在datetimepicker的css文件中找到： datepicker.css 第7行   .WdateDiv {   background-color: #FFFFFF;   border: 1px solid #BBBBBB;   padding: 2px;   width: 180px; // 改此处 }
uni-app 利用canvas进行画框，移动框，放大缩小并删除，目前支持小程序,h5，其他没测试过
xiaoyou_xiaohe的博客
06-01 2104
目前没有在小程序上自主画框的，参考了网上资源，但是小程序跟原生的vue写法还是有差别，攻克了很多难题，这里分享给大家
uniapp中uni-datetime-picker的提示语怎么修改样式
熬夜搬码员的博客
04-21 1155
到这里就明白，改下组件的源代码 让提示语用另一套样式就可以了，刚好改动也不大 （我只需要改变字体大小）；在开发页面的时候 发现uni-datetime-picker的样式和输入框的不统一。查看了代码才发现是因为提示语和输入框的值都是用的同一个样式。
解决uni-app 不同机型 因为刘海导致 自定义导航栏样式问题
weixin_52664596的博客
09-29 267
<template> <view class="prohibition"> <!-- <img src="../../static/形状结合@2x.png" style="width: 100%;"/> --> <view> <view class="demo" :style="'height:' + demo.height + 'px...
uni-data-picker的宽度
07-28
引用\[1\]中提到的uni-date-picker组件的宽度可以通过CSS样式进行设置。根据引用\[2\]中的代码，可以看到uni-date-picker组件的样式类为.uni-select，可以通过给该类添加width属性来设置宽度。例如，可以在样式文件中添加如下代码来设置uni-date-picker的宽度为100%： .uni-select { width: 100%; } 这样设置后，uni-date-picker组件的宽度将会占满其父容器的宽度。如果需要设置具体的宽度值，可以将100%替换为具体的像素值或百分比值。 #### 引用[.reference_title] - *1* [element 时间日期选择器el-date-picker点击清空按钮报错 Cannot read property ‘0‘ of null](https://blog.csdn.net/weixin_47988564/article/details/112596451)[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^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [＜uni-data-select＞无边框设置](https://blog.csdn.net/Djdjsjnsjx/article/details/126866752)[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^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [解决uniapp uni-datatime-picker的小尺寸扫码设备屏幕适配问题](https://blog.csdn.net/lyz246859/article/details/122918254)[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^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值