小程序 cover-image、cover-view覆盖原生组件

谁借莪１个温暖的怀抱￠ 2021-07-24 17:03 884阅读 0赞

cover-image
    	目前原生组件均已支持同层渲染,建议使用image替代,可覆盖的原生组件同cover-view,支持嵌套在cover-view里。
    	
    	 <原生组件>
    	 	<cover-image 
    	 		src			图标路径,支持临时路径、网络地址、云文件ID
    			bindload	图片加载成功时触发
    			binderror	图片加载失败时触发
    	 	></cover-image>
    	 </原生组件>	
    	 
    cover-view
    	覆盖在原生组件之上的视图,目前原生组件均已支持同层渲染,建议使用view替代
    	可覆盖的原生组件包括 view、map、video、canvas、camera、live-player、live-pusher
    	只支持嵌套cover-view、cover-image,可在cover-view中使用button,组件属性的长度单位默认为px,支持传入单位(rpx/px)。
    	
    	<原生组件>
    	 	<cover-view
    			scroll-top 	设置顶部滚动偏移量,仅在设置了overflow-y: scroll成为滚动元素后生效
    	 	></cover-view>
    	 </原生组件>	
    	
    	    tip: cover-view和cover-image的aria-role仅可设置为button,读屏模式下才可以点击,并朗读出“按钮”,为空时可以聚焦，但不可点击
    	    tip: 支持touch相关事件,也可使用hover-class设置点击态
    	    tip: 支持设置scale rotate的css 样式,包括transition动画
    	    tip: 支持overflow: scroll,但不支持动态更新overflow
    	    tip: 最外层cover-view支持position: fixed
    	    tip: 支持插在view等标签下,在此之前只可嵌套在原生组件map、video、canvas、camera内,避免嵌套在其他组件内。
    	    tip: 支持css transition动画,transition-property只支持transform(translateX, translateY)与opacity。
    	    tip: 支持css opacity。
    	    tip: 事件模型遵循冒泡模型,但不会冒泡到原生组件。
    	    tip: 文本建议都套上cover-view标签,避免排版错误。
    	    tip: 只支持基本的定位、布局、文本样式,不支持设置单边的border、background-image、shadow、overflow: visible等。
    	    tip: 建议子节点不要溢出父节点
    	    tip: 支持使用z-index控制层级
    	    tip: 默认设置的样式有:white-space: nowrap; line-height: 1.2; display: block;
    	    bug: 自定义组件嵌套cover-view时,自定义组件的slot及其父节点暂不支持通过wx:if控制显隐,否则会导致cover-view不显示

cover-image支持格式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]代码示例:

<map
       style="width: 100%; height: 300px;"
       latitude="{ {latitude}}"
       longitude="{ {longitude}}"
     >
       <cover-view class="cover-view">
         <cover-view class="container">
           <cover-view class="flex-wrp" style="flex-direction:row;">
             <cover-view class="flex-item demo-text-1"></cover-view>
             <cover-view class="flex-item demo-text-2"></cover-view>
             <cover-view class="flex-item demo-text-3"></cover-view>
           </cover-view>
         </cover-view>
       </cover-view>
     </map>
    
    .cover-view { 
      position: absolute;
      top: calc(50% - 150rpx);
      left: calc(50% - 300rpx);
      /* opacity: .7; */
    }
    
    .flex-wrp{ 
      display:flex;
    }
    
    .flex-item{ 
      width: 200rpx;
      height: 300rpx;
      font-size: 26rpx;
    }
    
    .demo-text-1 { 
      background: rgba(26, 173, 25, 0.7);
    }
    
    .demo-text-2 { 
      background: rgba(39, 130, 215, 0.7);
    }
    
    .demo-text-3 { 
      background: rgba(255, 255, 255, 0.7);
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/6f68dd3310b84e6e9b68635ba3b979c5.png