codecamp

百度智能小程序 原生组件说明

概念:原生组件是由客户端创建的原生组件。

包括:canvasmapanimation-viewtextareacover-viewcover-imagecameravideolive-playerinput 。

其中,video 组件(v3.70.0 起)、input 组件(v3.105.0 起)、textarea(v3.140.1 起支持)和 live-player(v3.140.1 起)已支持同层渲染。

为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件,但是使用限制与其他原生组件有所不同。

使用限制

由于原生组件脱离在 web-view 渲染流程外,因此在使用时有以下限制:

  • 原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。后插入的原生组件可以覆盖之前的原生组件。
  • 原生组件无法在 scroll-view、swiper、picker-view、movable-view 中使用,下面示例为错误写法。

代码示例: 

在开发者工具中打开
<view class="wrap">
    <view class="title">横向滚动</view>
    <scroll-view
        scroll-x
        class="scroll-view"
        bind:scrolltoupper="toLeft"
        bind:scrolltolower="toRight"
        scroll-left="{= scrollLeft =}"
        upper-threshold="1"
        lower-threshold="1"
        bind:scroll="scroll"
    >
        <cover-view class="flex-item demo-text-1"></cover-view>
    </scroll-view>
</view>
  • 部分 CSS 样式无法应用于原生组件,例如:无法对原生组件设置 CSS 动画;不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域。
  • 在 IOS 下,video 组件暂时不支持触摸相关事件。
  • 原生组件会遮挡 vConsole 弹出的调试面板。

在工具上,原生组件是用 web 组件模拟的,因此很多情况并不能很好的还原真机的表现,建议开发者在使用到原生组件时尽量在真机上进行调试。

同层渲染

同层渲染是为了解决原生组件的层级问题,在支持同层渲染后,原生组件与其它组件可以随意叠加,有关层级的限制将不再存在。当前 video、input 组件已支持同层渲染。

在同层渲染模式下:

  • 无需使用 cover-view、cover-image 组件来覆盖同层渲染组件。
  • 可在滚动组件,如 scroll-view、swiper、movable-view 等组件中使用同层渲染组件。
  • 可直接通过 z-index 属性对同层渲染组件进行层级控制。
  • 同层渲染组件不会遮挡 sConsole 弹出的调试面板。


百度智能小程序框架 性能优化建议
百度智能小程序 图片视图
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序开发文档

百度智能小程序 组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 API

百度智能小程序 界面

百度智能小程序 关注小程序引导组件

百度智能小程序 自定义组件

百度智能小程序 媒体

百度智能小程序 设备

百度智能小程序 拨打电话

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 用户截屏事件

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 百度收银支付

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 服务端

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云函数

百度智能小程序 开发教程

百度智能小程序 功能开发

百度智能小程序 基本原理

百度智能小程序 小程序自动化

百度智能小程序 视频教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }