uni-drawer抽屉下的uni-datetime-picker日期弹窗宽度无法最大化

最新推荐文章于 2024-06-16 14:03:24 发布

前端晚自习

最新推荐文章于 2024-06-16 14:03:24 发布

阅读量874

点赞数

分类专栏：前端文章标签：前端 css vue

本文链接：https://blog.csdn.net/weican57/article/details/128862316

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在uni-app中遇到uni-drawer内的uni-datetime-picker日期选择器弹窗无法全屏展示的问题，可以通过修改scss样式代码解决，具体做法是将遮罩层和日期弹窗的宽度设置为100vw，使其能最大化填充屏幕宽度。

摘要由CSDN通过智能技术生成

问题描述

在uni-app中的uni-drawer抽屉下使用uni-datetime-picker日期选择器时，弹窗宽度无法最大化撑满屏幕。

QQ图片20230202175748.png

QQ图片20230202175952.png

解决办法

将遮罩层和日期弹窗宽度设置为屏幕宽度即可，以下是scss样式代码：

::v-deep .uni-drawer {
    .uni-calendar__mask,
    .uni-calendar--fixed {
        width: 100vw;
    }
}

效果

QQ图片20230202180604.png

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端晚自习

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
uni-drawer抽屉下的uni-datetime-picker日期弹窗宽度无法最大化

在uni-app中的uni-drawer抽屉下使用uni-datetime-picker日期选择器时，弹窗宽度无法最大化撑满屏幕。
复制链接

扫一扫

专栏目录

如何修改datetimepicker的日历的显示的宽度

群来群往的博客

10-12

2万+

在datetimepicker的css文件中找到： datepicker.css 第7行 .WdateDiv { background-color: #FFFFFF; border: 1px solid #BBBBBB; padding: 2px; width: 180px; // 改此处 }

uni-datetime-picker 高度修改

计划好了再娶吧

04-02

570

在页面的标签内覆盖原有的class即可。uniapp 官方组件。

2 条评论您还未登录，请先登录后发表或查看评论

Uni-App中的u-datetime-picker时间选择器Demo

最新发布

qq_44624290的博客

06-16

670

【ElementUI】详细分析DatePicker 日期选择器事情起因是两个时间选择器同步了，本身是从后端慢慢步入全栈，对此将这个知识点从实战进行提炼通过Demo进行总结。

datetimepicker 日期值显示不完全（点击按钮后）

weixin_30408739的博客

02-27

981

datetimepicker 日期控件，当点击按钮进行其他操作的时候，里面的日期值显示不其安全了。解决办法，按钮事件里面 datetimepicker.update() 转载于:https://www.cnblogs.com/adandelion/archive/2009/02/27/1399709.html...

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

lyz246859的博客

02-28

1436

UniAPP时间选择器uni-datetime-picker调整选择间隔大小

CSDN_DAY_DAY_UP的博客

04-27

903

uni-datetime-picker修改可选时间的步进值

uni-app微信小程序单个页面横屏以及使用uni-datetime-picker、popup出现弹窗后还能滚动页面的问题

D浩DzD的博客

06-28

2031

uni-app微信小程序单个页面横屏以及使用uni-datetime-picker、popup出现弹窗后还能滚动页面的问题。catchtouchmove以及pageOrientation属性

uni-app组件uni-drawer 小案例（不遮挡小程序自定义导航栏）

pollotui的博客

07-11

902

uni-drawer组件

记录：uniapp中的uni-datetime-picker 在ios设备被遮盖覆盖的问题

weixin_43109722的博客

12-02

6759

偶然发现苹果手机上这个picker弹出来的时候，自己写的组件竟然覆盖在了这个picker的上面，遮挡住了picker，不是全部遮挡，是遮挡一部分。以为是z-index层级的问题，找问题找bug找了一上午，最后发现：在我的项目中，在这个uni-datetime-picker 最外层还套了一个scroll-view，去掉 scroll-view 问题解决，在此记录。还有uniapp的uni-datetime-picker组件是真的难用，难用，自己改巴改巴都改了一天，才能在我项目中用起来。汗！ ...

react-native-drawer-layout：一个与平台无关的react-native抽屉布局

02-05

React本机抽屉布局平台无关的抽屉布局。它在每个平台上使用纯JavaScript实现以确保一致性。我们尝试通过的实现使其保持最新状态，并添加我们认为必要的功能。将其添加到您的项目运行npm install react-native-...

react-native-drawer-menu：React Native Application的抽屉组件

02-05

React本机抽屉菜单 React Native Application的抽屉组件（iOS / Android）类似于QQ手机的抽屉菜单组件。例子 iOS平台 Android平台用法建议在iOS中，抽屉菜单组件仅应在顶级路径中使用，因为从屏幕左侧向右滑动...

Recyclerview-In-Navigation-Drawer:在导航抽屉中使用RecyclerView

05-02

这个项目"Recyclerview-In-Navigation-Drawer"是关于如何在导航抽屉（Navigation Drawer）中有效地使用`RecyclerView`来构建菜单。导航抽屉是Android应用设计模式中的一个关键元素，通常用于提供主屏幕之外的其他...

nativescript-ng2-drawer-seed：具有抽屉支持的Nativescript模板项目

02-04

NativeScript Ng2抽屉种子集成了抽屉支持的Nativescript种子项目已准备就绪，可以使用。要测试应用程序，只需克隆存储库并运行： $ tns run android 分支下的整合。

vanilla-js-drawer:一个无依赖的 Vanilla JS 抽屉。无依赖，无自动化构建工具

07-24

:rocket: 一个无依赖的 Vanilla JS 抽屉没有依赖关系，没有自动化构建工具。复制/粘贴并准备使用。 CSS 和 JS 内联在 HTML 文件中。 Autoprefixer 设置（在线）：最后 1 个版本要求一个浏览器。没有 Node.js、...

快应用中实现自定义抽屉组件

华为开发者联盟

06-29

1094

抽屉组件是一种特殊的弹出面板，可以模拟手机App中推入拉出抽屉的效果。抽屉一般具有如下特点：抽屉（Drawer）组件结构分为控制器和抽屉内容两部分。一般来说，controls都是按钮、图标之类的可点击的组件，类似真实抽屉的把手，content是抽屉内部的东西，每个抽屉的content都是不一样的。点击controls可以触发content的显示和收起。因此，在使用抽屉组件的页面布局可以抽象成如下结构： 2．实现步骤抽屉组件属于一种扩展能力，当前快应用已有的组件是无法满足的，

mint-ui的日期选择框DatetimePicker，android手机显示空白问题

Umbrella_Um的博客

09-09

909

有华为或小米手机出现日期选择框，日期显示空白，确定和取消还在的问题，这些个兼容问题真的是很难查，但是好在网友给力，搜到了解决办法，分享给大家~~ 其实很简单，修改一个属性就行 .picker-items{ width:100% } 原文地址：https://blog.csdn.net/qq_34664239/article/details/93870689 ...

bootstrap-datetimepicker 只选择月份出现1899问题

罗伯特是疯子丶

04-30

1882

需求最近在使用bootstrap-datetimepicker中，遇到一个需求，要求只能选择月份，本以为是件很简单的问题，即修改一下格式就可以 --> 'yyyy-mm'变为“mm”就行，结果意想不到的问题出现了：在第一次点选之后还算正常，结果第二次再次点选的时候，就会弹出1899，瞬间懵了~~~~ 效果如下：当然结果不影响，但是影响客户体验啊~~~~ 解决过程 ...

Uniapp uni-datetime-picker的日历和时间不兼容H5

weixin_51780751的博客

11-21

2343

用的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 vue3 使用uni-drawer

04-13

UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用程序。而Vue 3是Vue.js的最新版本，带来了许多新特性和改进。 Uni-Drawer是UniApp中的一个组件，用于实现抽屉式的导航菜单。使用Uni-Drawer可以方便地在应用程序中添加侧边栏菜单或者抽屉菜单。要使用Uni-Drawer，首先需要在页面的vue文件中引入uni-drawer组件，并在data中定义一个变量来控制抽屉的显示与隐藏。然后在模板中使用uni-drawer组件，并通过v-model绑定抽屉的显示状态。下面是一个简单的示例代码： ```vue <template> <view> <uni-drawer v-model="showDrawer" :width="300">  <view class="drawer-content">  </view> </uni-drawer>  <view class="main-content">  <button @click="showDrawer = true">打开抽屉</button> </view> </view> </template> <script> export default { data() { return { showDrawer: false, // 控制抽屉的显示与隐藏 }; }, }; </script> <style> .drawer-content { height: 100%; background-color: #fff; } .main-content { height: 100%; background-color: #f2f2f2; } </style> ``` 在上面的示例中，通过点击按钮来控制抽屉的显示与隐藏。点击按钮时，会将showDrawer变量设置为true，从而显示抽屉；再次点击按钮时，会将showDrawer变量设置为false，从而隐藏抽屉。