小程序中的view 和 cover-view的区别

最新推荐文章于 2024-09-09 16:31:20 发布

前端娱乐圈

最新推荐文章于 2024-09-09 16:31:20 发布

阅读量4.1k

点赞数 1

分类专栏：微信小程序文章标签： cover-view和view的区别 cover-view的使用方法和注意点 cover-view出现的bug

本文链接：https://blog.csdn.net/weixin_43612234/article/details/102552598

版权

微信小程序专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细解析了微信小程序中cover-view与view的区别，cover-view作为覆盖在原生组件上的文本视图，类似z-index的概念。文章通过实例演示了使用cover-view时可能遇到的滚动困难的bug，并提供了修复方案。

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

1：view 相当于div

2：cover-view ：覆盖在原生组件之上的文本视图。

注意点：只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。参考文档

一开始不怎么理解，直到遇到了一个bug，在找bug的过程中发，大家现先看一下这张图片

在这里插入图片描述

正常情况下，微信打开调试工具是这样的

在这里插入图片描述

cover-view 是覆盖在原生组件之上的文本视图，相当于z-index，用了cover-view，会有一个小小的bug，就是视图向上拉动的使用很艰难，就好像逆风而行，很难滑，一开始测试测出这个bug，我还有点无奈，怎么会这样子的呢，后来发现代码中用cover-view 就是看了一下文档，就解决了，代码如下

      <view class="course_wrap_top">
          <cover-view class="cover_view">
            <cover-image src="{{item.course_pic}}" mode="aspectFit" class="cover_img">
            </cover-image>
          </cover-view>
          <cover-view class="remind">
            <cover-view class="remind_word">
              <block wx:if="{{item.course_status == 1}}">即将开课</block>
              <block wx:if="{{item.course_status == 2}}">正在开课</block>
            </cover-view>
            <cover-view class="study_num">{{item.buy_number}}人参加学习</cover-view>
          </cover-view>
      </view>

     <view class="course_wrap_top">
          <view class="cover_view">
            <image src="{{item.course_pic}}" mode="aspectFit" class="cover_img">
            </image>
          </view>
          <view class="remind">
            <view class="remind_word">
              <block wx:if="{{item.course_status == 1}}">即将开课</block>
              <block wx:if="{{item.course_status == 2}}">正在开课</block>
            </view>
            <view class="study_num">{{item.buy_number}}人参加学习</view>
          </view>
        </view>