【uView】u-mask遮罩层 初始状态被放大

最新推荐文章于 2024-02-01 21:20:16 发布
最新推荐文章于 2024-02-01 21:20:16 发布
阅读量1.7k 收藏
点赞数 3
分类专栏： # uView 文章标签： uv css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuli_youhouli/article/details/121029548
版权

期待效果：

初始效果：

找不到原因，打开源码好发现是下方样式作怪

 

发现文档中有一个zoom属性

<u-mask class="log_mask" :show="show" @click="show = false" :zoom="false"></u-mask>

宾果的救星
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） ...
uview u-picker的省市区json文件
最新发布
04-01
uview u-picker的省市区json文件
uniapp中组件库Mask 遮罩层 的使用方法
精通前端技术，了解后端接口
02-01 1786
创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景。
这是我的项目需求，没有添加和修改页，只能在当前表格做添加和修改，下面是我的实现代码。
Sumdreamer的博客
08-05 287
html // u-mask是uView ui组件中的蒙层组件 <u-mask :show="show" @click="closeAddScore" class="mask_box"> <view class="add_score_box" @tap.stop> <view class="add_top"> <view class="add_title">内容</view> <view class="ad.
解决支付宝小程序uview组件u-popup遮罩滚动穿透问题
StayInCat的博客
04-19 4412
uni-app、u-popup、遮罩滚动穿透
点击遮罩层的背景关闭遮罩层
01-08
class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩
uni-app+color-ui+uview-ui 搭建的H5端初始demo
04-09
【标题】"uni-app+color-ui+uview-ui 搭建的H5端初始demo"涉及的关键技术点包括： 1. **uni-app**：uni-app 是由ECharts团队开发的一个跨端框架，允许开发者编写一次代码，可以同时在iOS、Android、Web（H5）、微信...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
解决uView2.0 Picker 选择器 (u-datetime-picker) 背景滚动，页面穿透的问题
gxdzi的博客
10-21 782
在组件的父级元素修改默认的事件。
vue手写遮罩层弹窗，实现点击遮罩层和关闭按钮关闭弹窗
weixin_45121510的博客
11-26 6222
父组件 <template> <section> <div class="ruleBtn" @click="handleClick($event)">点击按钮</div> <RuleModal v-if="ruleModalVisible" ref="ruleModal" :modalConfig="modalConfig" @close="closeRuleModal" /
uniapp中遮罩穿透问题
qq_40666120的博客
12-02 3773
当换出遮罩时，上下滑动依然可以滑动遮罩底部内容 此时给遮罩的view标签增加catchtouchmove=“return”，就可以防止穿透遮罩问题。 <view class="my_share" catchtouchmove='return'> </view>
uniapp 中安装使用 uView ui 框架
ougexingfuba的博客
08-02 791
1. 首先 下载 uView插件包,解压缩 https://ext.dcloud.net.cn/plugin?id=1593 2. 用 hbuilerX 创建一个 新的uniapp 项目 从零开始 ,把刚下载的uView文件夹 放到 和 main.js 的同级目录下（项目根目录） 3. 将下面的代码 放到 main.js 中 import uView from "uview-ui"; Vue.use(uView); 4 . 下面的放到 uni.scs...
uniapp 微信小程序和H5的弹窗滚动穿透解决
坐等夕阳落time的博客
10-17 1万+
uniapp 微信小程序和H5的弹窗滚动穿透解决（真的有效）
vux 中popup 组件 Mask 遮罩在最上层问题的解决
yanwosky4的博客
04-24 4186
vux 中popup 组件 Mask 遮罩在最上层问题的解决 问题描述： 在IOS设备上遮罩层显示在弹出内容的上面，导致弹出内容不能正常显示内容和响应点击事件 解决方案： 找到该Popup组件的祖先DOM节点是否被设置该CSS属性：-webkit-overflow-scrolling: touch; 若被设置将该CSS属性，则去掉即可。...
uniapp ui框架——uView
热门推荐
北桥T的博客
05-23 2万+
引子 小编很荣幸能在疫情期间认识uView的作者，并且成为uView的核心研发组成员之一。虽然我还是一名在读的大二学生，但我被作者的开源精神所感动，也因为uView想做uniapp生态标杆框架的精神所膜拜。在uView还未发布之前，我和作者就聊了很多关于uView的种种。uView作者为此框架付出了很多的心血，经常熬夜加班到凌晨四五点。他说这就是开源精神，我们所做的一切，都是有意义的。 虽然代码很重要，但在开源项目里，源码只是重要的因素之一。正如一位互联网人说过的一句话：没有社区的开源项目，其源码会一直停留
UIView的maskView属性
Escape This Moment
06-16 3245
想改变一个view的透明度可以直接改变alpha，还可以设置该View的maskview来实现。 UIView有一个maskView属性（遮罩），这个属性是通过改变alpha通道来改变透明度的，可以理解为maskview将自己“投影”到view上，实现改变alpha一样的效果。 1.设置了遮罩属性后view只显示和遮罩重叠的区域。 2.通过改变遮罩的alpha和颜色实现透明、半透明的效果。
uni-app小程序开发使用uView，u-model传入富文本内容过长，真机上无法滚动
weixin_42543235的博客
05-08 4305
uni-app小程序开发使用uView，u-model传入富文本内容过长，导致真机上无法滚动弹出框中内容。 解决方案： 找到u-model插件，在slot内容的外层自定义加入一个scroll-view标签，设置scroll-y="true"，指定高度。 <template> <view> <u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :le
uview u-read-more的使用
03-24
uview u-read-more 是一个用于展开和收起长文本的组件，可以在小程序中使用。使用方法如下： 1. 在需要展开和收起的文本区域中，使用 u-read-more 组件包裹起来。 2. 在 u-read-more 组件中，使用 slot="content" 插槽来放置需要展开和收起的文本内容。 3. 在 u-read-more 组件中，使用 slot="more" 插槽来放置展开和收起按钮的文本内容。 4. 在 u-read-more 组件中，使用 v-model 来绑定展开和收起的状态。 完整代码如下： <template> <view> <u-read-more v-model="isExpanded"> <view slot="content"> 这是一段需要展开和收起的长文本，可以放置任何文本内容。 </view> <view slot="more"> {{ isExpanded ? '收起' : '展开' }} </view> </u-read-more> </view> </template> <script> export default { data() { return { isExpanded: false } } } </script> 关于 uview 的使用，可以参考官方文档：https://www.uviewui.com/components/readmore.html
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宾果的救星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值