uni-app textarea 的穿透问题的解决

最新推荐文章于 2024-07-25 09:44:23 发布
最新推荐文章于 2024-07-25 09:44:23 发布
阅读量1.3k 收藏
点赞数
分类专栏： uni-app 属性 文章标签： html5 css3 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46926120/article/details/107710041
版权

uni-app textarea 的穿透问题的解决
首先我在开发项目的过程中遇到了这样的一个问题，（如图所示)
在微信开发工具运行时是没有问题的，真机调试的时候才会有这样的问题
解决问题的过程中发现无论给上面那个层级 z-index设置多大，下面那些文字都能穿透到上面；
然后我看到我用了textarea的标签，为了证实我的想法，把他改成p标签，果然这个问题没有了，那就是textarea的问题了

在这里插入图片描述

后来经过查找，微信小程序针对textarea的层级过高的问题是有解决方法的，就是把层级最高的那个标签 换成cover-view 问题就轻松解决啦！

weixin_46926120
关注
专栏目录
uni-app入门
01-08
- 老的HTML标签也可以在uni-app中使用，但不推荐，因为这可能导致H5端的调试混乱和选择器问题 **uni-app的新组件** uni-app引入了一些新的组件，适应移动端开发需求： - `scroll-view`：可区域滚动视图容器 - `...
样式穿透和uniapp下的uni_modules里面组件的样式
qq_39029949的博客
05-11 611
deep/在某些时候会报错，::v-deep更保险且编译速度更快。后，父组件的样式将不会渗透到子组件中。2、scoped作用：避免样式污染。
uniapp穿透第三方uView组件样式
Wang_MengHan的博客
04-13 2774
错误使用 <view class="search"> <u-search placeholder="地点/品牌/酒店" searchIconSize="32" v-model="keyword" animation="false"></u-search> </view> <style lang="scss" scoped> .search { /deep/ .u-search__content { padding: 0 !impo
【uniapp小程序样式穿透】
最新发布
wffcn的博客
07-25 347
有时候用样式穿透的时候h5是好好的，但是到了小程序这里就会发现没有效果，加上这句话就行了。
uniapp样式穿透
热门推荐
一粒程序米
04-18 1万+
有时候会遇到在class上修改的样式会无效，是因为遇到了样式穿透， 在vue开发过程中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过一些方法穿透scoped。 <style scoped> ::v-deep .act-view-radio{ background: #f9ebc6; } </style> 在那个class前面加上::v-deep以及在sty
uniapp中的 /deep/ 小程序的样式穿透
fttttttt的博客
03-15 3515
本来是这样的 中间有道缝隙 在样式 中加入 /deep/ 后面加上标签名获取 取得类名等都可以 这样写也是可以的 加入这些之后 这个缝隙就没有啦 这些拿的都是"假数据" 和真实数据效果是一样的 ...
web端下和uniapp下滑动穿透的解决方案，弹窗滑动导致底部滑动问题解决
weixin_44120503的博客
07-28 1636
web端和uniapp滑动穿透解决方案
uni-app配置表单示例修正版
05-11
基于uni-app插件市场中"配置表单"修改，修正原版不能运行的错误，通过传入配置数据动态渲染出表单，目前支持的表单组件有text,number,textarea,radio,checkbox,date,select,html。支持配置必填以及正则校验。提供...
uni-app开发社交类小程序
01-22
- 发帖与回复：用户可以对帖子进行评论，uni-app的textarea组件用于编辑评论内容，配合button组件完成提交操作。 - 点赞与分享：uni-app提供了模拟原生点赞动画的组件，同时可以调用微信小程序的分享接口，实现...
uni-app 之组件 入门教程 uniapp在线教程 uni app视频教程
06-20
通过这三个视频教程——"uni-app_之组件_入门教程_uniapp在线教程_uni_app视频教程-202042213529259_30599.zip"、"uni-app_之组件_入门教程_uniapp在线教程_uni_app视频教程-202042213524160_82447.zip"和"uni-app_...
微信小程序 textarea 层级过高问题简单解决方案
12-30
这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 建立一个新的textarea 组件代替原生textarea ,...
UniApp 组件内修改组件内的组件的样式,穿透组件中的组件样式
KingKaiGe的博客
04-01 4699
UniApp 组件内修改组件内的组件的样式,穿透组件中的组件样式main.vue 这是一个页面这是 a 组件这是 b 组件 页面可以修改页面引入的组件样式 直接使用 /deep/ 例如： main页面 修改 a组件的样式 <style lang="scss" scoped> <template> <view> <a-d class="a-d"></a-d> </view> </template> &lt
uniapp 开发微信小程序 样式穿透问题解决
qq_35388369的博客
05-06 1822
微信小程序样式穿透
uni-app textarea层级太高导致样式穿透
可控的事情要谨慎，不可控的事情要乐观。
06-20 1273
参考博客：小程序的textarea完美解决所有的坑包括穿透、样式等 <view class="items"> <text class="style-text">备注：</text> <textarea v-show="showTextArea" name="remark" class="content" style="height: 50rpx;padding: 5px 10px;font-size: 30upx;" placeholder="请输入备注..."
Uniapp，微信小程序input和textarea的placeholder内容穿透view层的解决方案
小星博博的博客
05-02 1630
采用<cover-view>标签代替<view>标签，并设置属性z-index: 9999;即可。 <view class="bottomBtnBox" > <button>提交报名</button> </view> 替换成如下： <cover-view class="bottomBtnBox" > <button>提交报名</button> </cover-view> ...
关于小程序中textarea 中placeholder滚动和穿透填坑
kirinlau的专栏
05-15 9341
小程序中的textarea一直是个坑，使用的是原生的textarea组件，其优先级，官方也没有给出明确的解决方案或者替代品，而且原生组件在开发时有一定的限制。具体可参考： https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html 我在小程序开发中，产品是在屏幕底栏有一个fix定位的操作栏，其中...
uniapp微信小程序解决弹框组件滚动穿透
zcq6037的博客
09-02 2756
一般在写一些组件如弹框，遮罩时，需要弹框能滚动，但是页面不能滚动，之前我是在弹框的根元素上加入@touchmove.stop.prevent，然后如果弹框要滚动的话就使用scroll-view来实现弹框内部滚动页面不滚动，但是后面发现了一个问题，如何弹框里面有textarea，textarea是滚动不了的，然后我就想到了另外一种办法来解决这个问题：可以在页面使用page-meta组件来动态控制页面是否可以滚动。 需要控制滚动的页面中第一个节点加入page-meta组件，切记必须在第一个节点且不能用v-if来
uniapp 小程序输入框的placeholder会穿透到弹出层
weixin_44179923的博客
04-07 1440
此情况常发生于表单，点击表单中的选择器、弹出层，会发现输入框的placeholder会浮现在选择器上层，点击会弹出软键盘，怎么调整输入框与选择器、弹出层的层级都无法解决该问题。 问题原因 input仅在微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序中且input置焦时表现为原生组件，其中支付宝小程序的input仅为text且置焦时表现为原生组件。 textarea仅在微信小程序、百度小程序、字节跳动小程序、飞书小程序表现为原生组件。 原生控件的层级是最高的，前端组件无法覆盖原生控件的
uni-app textarea显示文本框
12-06
uni-app中可以使用textarea标签来显示文本框，示例代码如下： ```html <template> <view class="textarea-group"> <h4>textarea演示</h4> <textarea v-model="value" placeholder="这是一段关于textarea的测试默认文字"></textarea> </view> {{ value }} </template> <script> export default { data() { return { value: '' } } } </script> ``` 在上述代码中，我们使用了textarea标签来创建一个文本框，并使用v-model指令将文本框的值与data中的value属性进行双向绑定。这样，当用户在文本框中输入内容时，value属性的值也会随之改变。后，我们在模板中使用{{ value }}来显示文本框的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值