uniapp中使用uview1.0中的u-dorpdown组件的坑

最新推荐文章于 2024-03-04 09:34:39 发布
最新推荐文章于 2024-03-04 09:34:39 发布
阅读量1k 收藏
点赞数
文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44326167/article/details/124470733
版权

在项目中使用下拉菜单u-dorpdown时，内容过多，但是页面无法滑动，于是加上 scroll-view 发现电脑端能滑动，但是手机端就是滑动不了。解决思路，不要使用scroll-view组件，改成普通的view组件，设置 style="height:300rpx;overflow-y:auto"

不会切肉的小辉同学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp u-dropdown在浙政钉小程序上真机点击无效的bug
独树一枝
04-29 723
原因：this.$uGetRect('.u-dropdown__menu')在浙政钉平台上运行真机无效。 修改：在u-dropdown文件上修改 let px = 80 * (uni.getSystemInfoSync().windowWidth / 750); this.contentHeight = this.contentHeight == 0 ? windowHeight - px : this.contentHeight; ...
uniapp里面使用uview-ui框架
05-14
uniapp里面使用uview-ui框架
uniapp Dropdown 下拉菜单无法滑动问题
weixin_43993613的博客
06-27 1345
uniappDropdown 下拉菜单无法滑动问题
uview1.x修复u-dropdown下拉菜单在微信小程序端遮罩层的层级异常bug
deng_zhihao692817的专栏
04-06 1461
在源文件里：uview-ui/components/u-dropdown/u-dropdown.vue <view v-if="contentStyle.zIndex > 0" class="u-dropdown__content" :style="[contentStyle, { transition: `opacity ${duration / 1000}s linear`, top: $u.addUnit(height), height: contentHeight.
uniapp 使用了uview 的dropdown下拉菜单后出现页面无法滚动
最新发布
weixin_47517731的博客
03-04 784
在上面不难发现，当下拉菜单已经处于关闭状态时，class为 u-dropdown__content这一块的元素还是存在的，究极原因是只把这个元素的opacity置为0了，导致页面无法滚动。所以找到uview的dropdown文件进行如下处理，直接给它关闭时隐藏dom即可。
u-view组件库使用Dropdown导致页面被覆盖 点击失效
weixin_46486552的博客
10-27 1855
问题：由于u-dropdown组件层级过高，覆盖住了当前页面导致页面点击事件失效 解决办法：修改源代码 1找到u-view源码中的u-dropdown.vue文件,在源代码中添加如下代码即可解决 dara(){ return { dropdownShow:false } } <view class="u-dropdown" :style="dropDownShow?'':'overflow:hidden'"> </view> close(){ this.dropdown
uview中u-picker实多级选择.zip 下载即用
10-24
只需要复制组件框架，data中定义的数据，以及methods中的方法即可实现； 兄弟们，不敢骗你们，我找了好久，好多假的，没效果的，不如直接下载我的， 有问题可随时联系，不容易，找了几天u-picker三级联动的使用方法。
吸顶u-sticky和下拉选框u-dropdown配合使用，吸顶后下方内容被遮挡
weixin_45693257的博客
08-02 3365
前言： 因为最近使用uniapp开发小程序，使用了uview组件。 在同时使用了吸顶u-sticky 和 下拉选框u-dropdown后，发现吸顶后，下方内容会被遮挡。 哭唧唧~ 百度后有大佬解决啦，地址：https://gitee.com/xuqu/uView/issues/I3J1RB?from=project-issue 所以想记录一下啦~ 添加了一个变量，关闭的时候把高设置为0，打开的时候回复屏幕高度，能解决dropdown和sticky配合使用的时候遮挡下面内容的问题，目前达到预期效果 一.
u-view组件库里 Dropdown 下拉菜单 导致页面内容被遮盖 无法点击问题
New个对象喝咖啡
08-10 3977
在使用uview的dropdown组件时页面的点击事件 navigator失效，在点击事件打印值也没有执行，观察页面样式时发现 由于是组件的遮罩层覆盖住了页面 导致的问题(uview可能是在打开/关闭下拉菜单时更改了 遮罩层的透明度而已) 修改源代码 在node_modules里的uview-ui->components->u-dropdown->u-dropdown.vue文件里定义是否显示遮罩层 data(){ return{ dropDownShow:false } } &
primevue的Dropdown下拉框 选中后不显示值（未解决）
lue0113的博客
12-05 430
primevue组件下拉框数据绑定遗留问题
uni-app下拉实例模板
04-04
uni-app的点击下拉实例模板，非常好用，可以放心使用。
uni-app下拉框实现
12-18
uni-app下拉框实现，纯原生写法
uniapp使用uview组件实现省市区三级联动
06-29
uniapp使用uview组件实现省市区三级联动； 文件下载后，需要在项目中引入uview组件方可使用； 数据附带在文件中
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） ...
uView1.0.zip
11-22
主要解决现在创建uView项目为2.0版本的人群，直接拖进IDE，点击运行即可
UGUI 中 dropdown 改变子项大小后无法完全显示的问题
lizhenxiqnmlgb的博客
06-24 234
更改如下： Item： Content：
uni-app +uViewUI的u-dropdown遮罩和层级问题
HHHHH2187的博客
10-26 791
问题1：点击下拉菜单后出现多余的灰色遮罩，很影响外观，如下图所示。解决：找到node_modules/uview-ui/components/u-dropdown/u-dropdown.vue这个文件，找到这个u-dropdown__content__mask类名加上 opacity: 0;如下图示。
uniapp中配合uview ui 的u-upload组件 如何在上传之前进行图片压缩
06-08
在uniapp中，可以使用uni-image-picker插件来实现图片选择和压缩的功能。首先，需要在项目中安装uni-image-picker插件： ``` npm install uni-image-picker --save ``` 然后，在需要使用图片上传功能的页面中引入u-upload组件和uni-image-picker插件： ``` <template> <div> <u-upload :upload-url="uploadUrl" :max-count="maxCount" :upload-before="beforeUpload" :upload-success="onSuccess" :upload-error="onError" :upload-complete="onComplete" > <u-button type="primary">选择图片</u-button> </u-upload> </div> </template> <script> import uniImagePicker from 'uni-image-picker'; export default { data() { return { uploadUrl: 'your upload url', maxCount: 1, }; }, methods: { beforeUpload(files) { return new Promise((resolve, reject) => { uniImagePicker.compressImage({ files: files, quality: 80, success: res => { resolve(res.tempFilePaths); }, fail: err => { reject(err); }, }); }); }, onSuccess(response) { console.log(response); }, onError(err) { console.log(err); }, onComplete() { console.log('upload complete'); }, }, }; </script> ``` 在beforeUpload方法中，使用uniImagePicker.compressImage将选择的图片进行压缩，并将压缩后的图片路径返回给u-upload组件进行上传。其中quality参数表示压缩质量，可以根据需要进行调整。 注意：在使用uniImagePicker插件进行图片压缩时，需要将压缩后的图片路径返回给u-upload组件进行上传。因此，需要在beforeUpload方法中返回一个Promise对象，并在Promise的resolve方法中返回压缩后的图片路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值