如何让view覆盖在scroll-view上（微信小程序）

最新推荐文章于 2024-04-16 09:17:22 发布
最新推荐文章于 2024-04-16 09:17:22 发布
阅读量3.9k 收藏 4
点赞数 4
分类专栏： 布局 文章标签： 微信小程序 scroll-view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42775791/article/details/84875154
版权

微信小程序原生组件级别是最高的，那像是map、video、canvas、camera之类的原生组件可以使用cover-view,覆盖在原生组件之上的文本视图，只支持嵌套cover-view、cover-image。我想了很久，最后发现只需要一句话，既可以覆盖在scroll-view上，还可以覆盖在swiper上。

margin-top:-20rpx;
positon:relative;
Doris@
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
小程序如何实现其他内容覆盖scroll-view层呢？已解决
weixin_41033048的博客
04-08 1692
如果你想要实现的效果如上图所示，那么可以参考一下的代码：思路主要是因为scroll-view的层级太高了，所以我们用两个scroll-view来处理这种问题。 wxml <view style="width:100%;height:100rpx;background:orange;text-ailgn:center;" bindtap="change"><text>c...
【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题
weixin_34406086的博客
07-21 1204
问题图： 问题原因：   &lt;scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}"  scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll&qu
微信小程序scroll-view点击实现快速导航索引滚动定位详细方法
最新发布
天天打码-16年老码农
04-16 400
在做一个微信小程序时，有很多列表分类，每个分类下有多个数据，可以在右边固定一个快速索引，点击后滚动到指定位置。就是用scroll-view点击实现快速导航索引滚动定位。与view id锚点链接类似。1.利用原生的微信小程序。
微信小程序 view组件显示在scroll-view上方
weixin_40938312的博客
08-12 1624
设置css view的z-index为1 .u{margin-top:-30px;position:absolute;z-index: 1;background-color: rgb(175, 215, 252);text-align: center}
微信小程序 覆盖swiper原生组件
一只小辣鸡
04-15 2899
试了好多种方法都不行，后来发现直接在wxss里添加“相对定位”就可以了。.cover{ position: relative; margin-top: -20rpx;}
异常处理——scroll-view滚动时遮挡其他组件
番薯大佬的专栏
04-27 3819
WeChat小程序交流（QQ群：769977169）页面组件分为上下两部分，上部分组件是view导航标题，下部分是scroll-view内容组件；scroll-view组件向上滚动时，出现遮挡了导航标题的情况。造成这种情况的原因是，采用自动适配计算scroll-view的高度时，高度计算错误导致的。onReady: function () { var thisBlock = this; ...
iOS-iPhoneX 中ScrollView覆盖状态栏，撑满整个屏幕
MinggeQingchun的博客
07-08 2405
一般做产品详情的都知道，导航栏隐藏，然后视图覆盖状态栏，在iPhone X上使用UIScrollView布置产品详情view时，发现其视图往下偏移了一部分，查看图层发现偏移量刚好是状态栏的高度，因此需要将其往上提一下，覆盖状态栏，盛满整个屏幕，加入以下方法 self.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustm...
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： <scroll xss=removed> asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj </scroll> 发现scroll-view内的一大...
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
微信小程序scroll-view实现字幕滚动
01-03
本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码，供大家参考，具体内容如下 需求： 实现框内的文字自下而上的自动循环滚动。 解决方案： demo:字幕滚动 通过控制滑动条来完成字幕滚动，通过...
微信小程序完美解决scroll-view高度自适应问题的方法
01-19
第一种情况，scroll-view占据整屏 scroll-view { height: 100vh; } 第二种情况，scroll-view自适应页面剩余高度 xml文件 <view class=box> <view class=box-head></view> <scroll class=box-scroll></...
微信小程序顶部栏图片随页面滚动渐变展示隐藏
艾小逗
04-15 4084
微信小程序顶部栏图片随页面滚动渐变展示隐藏 小程序顶部通栏，展示图片，随着页面滚动，开始渐变展标题记及纯色吸顶样式 主要使用了小程序中的scroll-view组件，通过滚动时触发 bindscroll和滚动到顶部 bindscrolltoupper改变顶部栏的样式效果 目录微信小程序顶部栏图片随页面滚动渐变展示隐藏效果如图：代码如下：index.wxmlindex.jsindex.wxssindex.json 效果如图： 运用技术： 主要使用了小程序中的scroll-view组件，通过滚动时触发 bind
微信小程序之cover-view
qq_36935391的博客
03-11 2812
使cover-view 内部的内容超出滚动 样式中加入overflow-y:scroll 就可以了
微信小程序--textarea显示文字至于最顶层, 但是覆盖其他view, 显示未超出
张福润的博客
08-20 2668
案例 问题是这样的, 我们想将textarea的高度设定自适应, so, 使用到了auto-height属性, 但是, 这个时候出现了问题, 因为我们最大输入量是1000字, 很容易超出屏幕大小的区域, 这时候textarea显示的内容会覆盖在其他的view之上. 问题: textarea的view 显示区域正常, 只有文字覆盖在最上层, 如下图 这个是textarea的问题, 那么 如何解决呢 解决 这时候就需要cover-view替代那些本身需要覆盖在上面的view, 来解决这个问题. 注意 这里需要
微信小程序view覆盖整个屏幕
springleaf2的专栏
08-22 784
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
小程序笔记—一个view覆盖另一view的两种方式
WeiHan_Seven的博客
01-20 6194
flex布局是不同的弹性项目占用弹性盒子的x/y两个方向的空间，但是在经常会遇到需要一个view覆盖另一个view的场景，这时候怎么办呢？现有两种方式处理，总结如下。
小程序多个view覆盖
weixin_40584888的博客
07-29 1261
多个view重叠效果怎么做？ 在小程序需要多个view的覆盖，或者制作遮罩层，首先先再css写一个page的样式 不然百分比高度无法使用。 然写遮罩层样式就可以了 效果 因为有蒙版效果，所以底层的绿色背景偏深。 ...
解决微信小程序textarea层级太高遮挡其他组件的问题
weixin_30878501的博客
07-29 352
<view class='remark'> <view class='title'> 备注说明 </view> <textarea class='mark_textarea' placeholder='请说明人员调用具体原因' bindinput="in...
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
山谷里的杂货铺
04-26 1153
问题： extarea层级过高会在弹窗上显示 思路： 1、当条件为true时显示假的输入框，点击的时切换条件为false，显示textarea，然后失去焦点之后条件又改为true 2、弹出框的问题解决了，但是又发现新的问题，输入框要点击两次才能获取焦点 3、解决办法，textarea的focus属性绑定条件，当条件为false时获取焦点 代码： data() { return { showTextarea :true // 默认显示假输入框 ...
微信小程序scroll-view scroll-into-view
10-13
微信小程序中的 scroll-view 组件可以实现滚动视图的效果，而 scroll-into-view 属性可以让指定的某个子组件滚动到视图中。当 scroll-into-view 的值为某个子组件的 id 时，该子组件就会滚动到 scroll-view 的顶部或底部，具体取决于该子组件在 scroll-view 中的位置。 例如，以下代码可以让 id 为 "item-5" 的子组件滚动到 scroll-view 的顶部： ``` <scroll-view scroll-into-view="item-5"> <view id="item-1">...</view> <view id="item-2">...</view> <view id="item-3">...</view> <view id="item-4">...</view> <view id="item-5">...</view> <view id="item-6">...</view> <view id="item-7">...</view> </scroll-view> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值