CINXE.COM

<!DOCTYPE html> <html lang="cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>grid-builder | 微信开放文档</title> <meta name="description" content="微信开发者平台文档"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff"> <meta name="keywords" content="微信官方文档"> <link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico"> <link rel="mask-icon" color="#4C4C4C" href="https://res.wx.qq.com/a/wx_fed/assets/res/MjliNWVm.svg"> <link rel="apple-touch-icon-precomposed" href="https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png"> <script> (function () { 'use strict'; const SCRIPT_URLs = [ 'https://dldir1.qq.com/WechatWebDev/devPlatform/px.min.js', 'https://dev.weixin.qq.com/platform-console/proxy/assets/tel/px.min.js', ]; const param = { maskMode: 'no-mask', // 隐私策略, all-mask 或 no-mask, 详见：https://dev.weixin.qq.com/docs/analysis/sdk/docs.html recordCanvas: false, // 若要采集canvas, 设为true projectId: 'wxef34f91ddab0c534-0HLdQNKAk-dzsFsA', // 项目 ID，需替换为体验分析项目 ID iframe: false, // 是否采集 iframe 页面 console: true, // 是否采集 console 输出的错误日志 network: true, // 是否采集网络错误 }; function loadScript(url) { return new Promise((resolve, reject) => { const scriptEle = document.createElement('script'); scriptEle.type = 'text/javascript'; scriptEle.async = true; scriptEle.src = url; scriptEle.onload = () => { resolve(url); }; scriptEle.onerror = () => { reject(new Error('Script load error')); }; document.head.appendChild(scriptEle); }); } async function main() { try { sessionStorage.setItem('wxobs_start_timestamp', String(Date.now())); const fastestUrl = await Promise.race(SCRIPT_URLs.map(url => loadScript(url))); window.__startPX && window.__startPX(param); } catch (error) { console.error('Error loading scripts:', error); } } main(); })(); </script> <link rel="preload" href="https://res.wx.qq.com/wxdoc/dist/assets/css/0.styles.d7e6e1b8.css" as="style"><link rel="preload" href="https://res.wx.qq.com/wxdoc/dist/assets/js/app.6ab6bfc0.js" as="script"><link rel="preload" href="https://res.wx.qq.com/wxdoc/dist/assets/js/2090.80282027.js" as="script"> <link rel="stylesheet" href="https://res.wx.qq.com/wxdoc/dist/assets/css/0.styles.d7e6e1b8.css"> </head> <body> <div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-container"><header class="navbar navbar_with-link"><div class="navbar__left"><a href="/doc/" class="home-link"><div class="logo__wrp"><span class="logo__icon"></span></div></a> <span class="dot"></span> <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item selected"> <a href="/miniprogram/dev/framework/" class="nav-link external"> 小程序 </a></li><li class="dropdown-item"> <a href="/minigame/introduction/" class="nav-link external"> 小游戏 </a></li><li class="dropdown-item"> <a href="/doc/offiaccount/Getting_Started/Overview.html" class="nav-link external"> 公众号 </a></li><li class="dropdown-item"> <a href="/doc/aispeech/platform/INTRODUCTION.html" class="nav-link external"> 智能对话 </a></li><li class="dropdown-item"> <a href="/doc/oplatform/Third-party_Platforms/2.0/getting_started/terminology_introduce.html" class="nav-link external"> 开放平台 </a></li><li class="dropdown-item"> <a href="https://work.weixin.qq.com/api/doc" class="nav-link external"> 企业微信 </a></li><li class="dropdown-item"> <a href="https://pay.weixin.qq.com/doc/v3/merchant/4012062524" class="nav-link external"> 微信支付 </a></li><li class="dropdown-item"> <a href="/doc/channels/Operational_Guidelines/Shop_opening_guidelines.html" class="nav-link external"> 视频号 </a></li><li class="dropdown-item"> <a href="/doc/store/API/basics/ChangeLog.html" class="nav-link external"> 微信小店 </a></li><li class="dropdown-item"> <a href="/doc/xwei/xiaowei-introduction/Introduction.html" class="nav-link external"> 腾讯小微 </a></li><li class="dropdown-item"> <a href="/doc/ministore/minishopquickstart/introduction.html" class="nav-link external"> 小商店 </a></li></ul></div></div> <div class="navbar__center"><nav class="nav-links"><div class="nav-item selected"><a href="/miniprogram/dev/framework/" class="nav-link external"> 开发 </a></div><div class="nav-item"><a href="/miniprogram/introduction/" class="nav-link external"> 介绍 </a></div><div class="nav-item"><a href="/miniprogram/design/" class="nav-link external"> 设计 </a></div><div class="nav-item"><a href="/miniprogram/product/" class="nav-link external"> 运营 </a></div><div class="nav-item"><a href="/miniprogram/analysis/wedata/intro/" class="nav-link external"> 数据 </a></div><div class="nav-item"><a href="/miniprogram/security/basic/" class="nav-link external"> 安全 </a></div></nav></div> <div class="navbar__right"><nav class="nav-links"><div class="nav-item community-item"><a href="https://developers.weixin.qq.com/community/develop/mixflow" target="_blank" class="nav-link external"> 社区 </a></div><div class="nav-item community-item"><a href="https://developers.weixin.qq.com/community/business" target="_blank" class="nav-link external"> 学堂 </a></div></nav> <ul class="lang-tab"><li class="lang-tab__icon"><img src="https://res.wx.qq.com/t/components/icons/base/translate_regular.svg"></li></ul> <div class="search__wrp-flex"><div class="search__input"><div class="weui-desktop-search"><button class="weui-desktop-icon-btn weui-desktop-search__btn weui-desktop-icon-btn__width"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.4529 16.4014C14.2428 17.4001 12.6915 18 11 18C7.134 18 4 14.866 4 11C4 7.134 7.134 4 11 4C14.866 4 18 7.134 18 11C18 12.7425 17.3633 14.3363 16.3099 15.5614L20.4243 19.6757L19.5757 20.5243L15.4529 16.4014ZM16.8 11C16.8 14.2033 14.2033 16.8 11 16.8C7.79674 16.8 5.2 14.2033 5.2 11C5.2 7.79676 7.79674 5.20001 11 5.20001C14.2033 5.20001 16.8 7.79676 16.8 11Z" fill="black"></path></svg></button></div> <a href="javascript:;" class="search-back__btn">取消</a></div> <div class="reco-list__wrp" style="display:none;"><ul class="reco__list"></ul> <div class="show-more"><a href="/doc/search?source=more&query=&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F" class="reco-item__link">查看更多 </a></div></div> <div class="reco-list__wrp" style="display:none;"><div class="show-more"><a href="/doc/search?source=more&query=&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F" class="reco-item__link">在小程序下暂无结果，查看其它业务相关内容 > </a></div></div></div></div></header> <div class="subnavbar"><ul class="subnavbar__list"><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/framework/" target="_self"> 指南 </a> </div> </li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/reference/" target="_self"> 框架 </a> </div> </li><li class="subnavbar__item selected" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/component/" target="_self" class="router-link-active"> 组件 </a> </div> </li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/api/" target="_self"> API </a> </div> </li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/OpenApiDoc/" target="_self"> 服务端 </a> </div> </li><li class="subnavbar__item dropdown-subnavbar" style="display:;"><div class="dropdown-subnavbar-title"><a>平台能力</a> <span class="arrow right dropdown-subnavbar-select"></span></div> <ul class="dropdown-subnavbar-ul"><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/industry/" target="_self" class="nav-link external"> 行业能力 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/business-capabilities/" target="_self" class="nav-link external"> 商业能力 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/miniapp/" target="_self" class="nav-link external"> 多端能力 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/service-market/" target="_self" class="nav-link external"> 服务市场 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/cityservice/" target="_self" class="nav-link external"> 城市服务 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/charge/" target="_self" class="nav-link external"> 付费能力 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/platform-capabilities/extended/" target="_self" class="nav-link external"> 拓展能力 </a></li></ul></li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/devtools/devtools" target="_self"> 工具 </a> </div> </li><li class="subnavbar__item dropdown-subnavbar" style="display:;"><div class="dropdown-subnavbar-title"><a>云服务</a> <span class="arrow right dropdown-subnavbar-select"></span></div> <ul class="dropdown-subnavbar-ul"><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/wxcloudservice/wxcloud/basis/getting-started" target="_self" class="nav-link external"> 云开发 </a></li><li class="dropdown-item" style="display:;"><a href="/miniprogram/dev/wxcloudservice/wxcloudrun/src/" target="_self" class="nav-link external"> 云托管 </a></li></ul></li><li class="subnavbar__item" style="display:;"><div class="dropdown-subnavbar-title"><a href="/miniprogram/dev/framework/release/" target="_self"> 更新日志 </a> </div> </li></ul></div> <div class="mobile-links__wrp"><div class="mobile-links_mobile"><a href="javascript:;" class="mobile-links__btn">开发</a></div> <div class="mobile-links__panel"><div class="links-panel__bd"><nav class="nav-links"><div class="nav-item selected"><a href="/miniprogram/dev/framework/" class="nav-link external"> 开发 </a></div><div class="nav-item"><a href="/miniprogram/introduction/" class="nav-link external"> 介绍 </a></div><div class="nav-item"><a href="/miniprogram/design/" class="nav-link external"> 设计 </a></div><div class="nav-item"><a href="/miniprogram/product/" class="nav-link external"> 运营 </a></div><div class="nav-item"><a href="/miniprogram/analysis/wedata/intro/" class="nav-link external"> 数据 </a></div><div class="nav-item"><a href="/miniprogram/security/basic/" class="nav-link external"> 安全 </a></div></nav></div> <div class="links-panel__ft"><ul class="lang-tab"><li class="lang-tab__icon"><img src="https://res.wx.qq.com/t/components/icons/base/translate_regular.svg"></li></ul></div></div> <div><div class="weui-mask" style="display:none;"></div> <div class="weui-actionsheet "> <div class="weui-actionsheet__menu"><div class="weui-actionsheet__cell">中文</div><div class="weui-actionsheet__cell">EN</div></div> <div class="weui-actionsheet__action"><div class="weui-actionsheet__cell">取消</div></div></div></div></div> <a href="javascript:;" class="mobile-search-btn"></a> <div class="main-container" style="margin-top:144px;"><div class="main-contontaier__bd" style="min-height:0px;"><div class="sidebar__wrp"><div class="sidebar-cell_mobile"><li class="subnavbar__item selected"><a href="javascript:;" target="_self">组件</a></li></div> <aside class="sidebar" style="top:144px;"> <div class="TreeNavigation"><div class="NavigationLevel NavigationLevel--level-0"><ul><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/cover-image.html" class="NavigationItem__router-link"> 视图容器 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/cover-image.html" class="NavigationItem__router-link"> cover-image </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/cover-view.html" class="NavigationItem__router-link"> cover-view </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/match-media.html" class="NavigationItem__router-link"> match-media </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/movable-area.html" class="NavigationItem__router-link"> movable-area </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/movable-view.html" class="NavigationItem__router-link"> movable-view </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/page-container.html" class="NavigationItem__router-link"> page-container </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/root-portal.html" class="NavigationItem__router-link"> root-portal </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/scroll-view.html" class="NavigationItem__router-link"> scroll-view </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/swiper.html" class="NavigationItem__router-link"> swiper </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/swiper-item.html" class="NavigationItem__router-link"> swiper-item </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/view.html" class="NavigationItem__router-link"> view </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/icon.html" class="NavigationItem__router-link"> 基础内容 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/icon.html" class="NavigationItem__router-link"> icon </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/progress.html" class="NavigationItem__router-link"> progress </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/rich-text.html" class="NavigationItem__router-link"> rich-text </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/selection.html" class="NavigationItem__router-link"> selection </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/text.html" class="NavigationItem__router-link"> text </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/button.html" class="NavigationItem__router-link"> 表单组件 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/button.html" class="NavigationItem__router-link"> button </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/checkbox.html" class="NavigationItem__router-link"> checkbox </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/checkbox-group.html" class="NavigationItem__router-link"> checkbox-group </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/editor.html" class="NavigationItem__router-link"> editor </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/form.html" class="NavigationItem__router-link"> form </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/input.html" class="NavigationItem__router-link"> input </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/keyboard-accessory.html" class="NavigationItem__router-link"> keyboard-accessory </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/label.html" class="NavigationItem__router-link"> label </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/picker.html" class="NavigationItem__router-link"> picker </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/picker-view.html" class="NavigationItem__router-link"> picker-view </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/picker-view-column.html" class="NavigationItem__router-link"> picker-view-column </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/radio.html" class="NavigationItem__router-link"> radio </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/radio-group.html" class="NavigationItem__router-link"> radio-group </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/slider.html" class="NavigationItem__router-link"> slider </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/switch.html" class="NavigationItem__router-link"> switch </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/textarea.html" class="NavigationItem__router-link"> textarea </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/double-tap-gesture-handler.html" class="NavigationItem__router-link"> Skyline </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/double-tap-gesture-handler.html" class="NavigationItem__router-link"> 手势系统 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/double-tap-gesture-handler.html" class="NavigationItem__router-link"> double-tap-gesture-handler </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/force-press-gesture-handler.html" class="NavigationItem__router-link"> force-press-gesture-handler </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/horizontal-drag-gesture-handler.html" class="NavigationItem__router-link"> horizontal-drag-gesture-handler </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/long-press-gesture-handler.html" class="NavigationItem__router-link"> long-press-gesture-handler </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/pan-gesture-handler.html" class="NavigationItem__router-link"> pan-gesture-handler </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/scale-gesture-handler.html" class="NavigationItem__router-link"> scale-gesture-handler </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/tap-gesture-handler.html" class="NavigationItem__router-link"> tap-gesture-handler </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/vertical-drag-gesture-handler.html" class="NavigationItem__router-link"> vertical-drag-gesture-handler </a>  </span></li></ul></div></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/draggable-sheet.html" class="NavigationItem__router-link"> draggable-sheet </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/grid-builder.html" aria-current="page" class="NavigationItem__router-link router-link-exact-active router-link-active"> grid-builder </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/grid-view.html" class="NavigationItem__router-link"> grid-view </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/list-builder.html" class="NavigationItem__router-link"> list-builder </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/list-view.html" class="NavigationItem__router-link"> list-view </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/nested-scroll-body.html" class="NavigationItem__router-link"> nested-scroll-body </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/nested-scroll-header.html" class="NavigationItem__router-link"> nested-scroll-header </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/open-container.html" class="NavigationItem__router-link"> open-container </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/share-element.html" class="NavigationItem__router-link"> share-element </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/snapshot.html" class="NavigationItem__router-link"> snapshot </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/span.html" class="NavigationItem__router-link"> span </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/sticky-header.html" class="NavigationItem__router-link"> sticky-header </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/sticky-section.html" class="NavigationItem__router-link"> sticky-section </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/functional-page-navigator.html" class="NavigationItem__router-link"> 导航 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/functional-page-navigator.html" class="NavigationItem__router-link"> functional-page-navigator </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/navigator.html" class="NavigationItem__router-link"> navigator </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/audio.html" class="NavigationItem__router-link"> 媒体组件 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/audio.html" class="NavigationItem__router-link"> audio </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/camera.html" class="NavigationItem__router-link"> camera </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/channel-live.html" class="NavigationItem__router-link"> channel-live </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/channel-video.html" class="NavigationItem__router-link"> channel-video </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/image.html" class="NavigationItem__router-link"> image </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/live-player.html" class="NavigationItem__router-link"> live-player </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/live-pusher.html" class="NavigationItem__router-link"> live-pusher </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/video.html" class="NavigationItem__router-link"> video </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/voip-room.html" class="NavigationItem__router-link"> voip-room </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/map.html" class="NavigationItem__router-link"> 地图 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/map.html" class="NavigationItem__router-link"> map </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/canvas.html" class="NavigationItem__router-link"> 画布 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/canvas.html" class="NavigationItem__router-link"> canvas </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/ad.html" class="NavigationItem__router-link"> 开放能力 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/ad.html" class="NavigationItem__router-link"> ad </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/ad-custom.html" class="NavigationItem__router-link"> ad-custom </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/official-account.html" class="NavigationItem__router-link"> official-account </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/open-data.html" class="NavigationItem__router-link"> open-data </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/store-home.html" class="NavigationItem__router-link"> store-home </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/store-product.html" class="NavigationItem__router-link"> store-product </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/web-view.html" class="NavigationItem__router-link"> web-view </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/native-component.html" class="NavigationItem__router-link"> 原生组件说明 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/native-component.html" class="NavigationItem__router-link"> native-component </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/aria-component.html" class="NavigationItem__router-link"> 无障碍访问 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/aria-component.html" class="NavigationItem__router-link"> aria-component </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/navigation-bar.html" class="NavigationItem__router-link"> 导航栏 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/navigation-bar.html" class="NavigationItem__router-link"> navigation-bar </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/page-meta.html" class="NavigationItem__router-link"> 页面属性配置节点 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/page-meta.html" class="NavigationItem__router-link"> page-meta </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-1"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/overview/" class="NavigationItem__router-link"> XR-FRAME </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/overview/" class="NavigationItem__router-link"> 概述 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/overview/#概述" class="NavigationItem__router-link"> 概述 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/overview/#特性" class="NavigationItem__router-link"> 特性 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/overview/#示例" class="NavigationItem__router-link"> 示例 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/overview/#限制和展望" class="NavigationItem__router-link"> 限制和展望 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/" class="NavigationItem__router-link"> 核心 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/" class="NavigationItem__router-link"> 架构(ECS) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/component.html" class="NavigationItem__router-link"> 组件(Component) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/data-values.html" class="NavigationItem__router-link"> 组件数据解析(DataParse) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/element.html" class="NavigationItem__router-link"> 元素(Element) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/event.html" class="NavigationItem__router-link"> 事件(Event) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/scene.html" class="NavigationItem__router-link"> 场景(Scene) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/node.html" class="NavigationItem__router-link"> 节点(Node) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/node.html#可见性与图层" class="NavigationItem__router-link"> 可见性与图层(Visible&Layer) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/shadow.html" class="NavigationItem__router-link"> Shadow元素(ShadowElement) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/core/slot.html" class="NavigationItem__router-link"> Slot </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/assets/" class="NavigationItem__router-link"> 资源 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/assets/" class="NavigationItem__router-link"> 资源系统(AssetsSystem) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/assets/loader.html" class="NavigationItem__router-link"> 资源加载器(AssetLoader) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/assets/elements.html" class="NavigationItem__router-link"> 资源加载元素(AssetLoad) </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/" class="NavigationItem__router-link"> 渲染 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/" class="NavigationItem__router-link"> 渲染系统(RenderSystem) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/#画布透明配置" class="NavigationItem__router-link"> 画布透明配置(Alpha) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/geometry.html" class="NavigationItem__router-link"> 几何数据(Geometry) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/effect.html" class="NavigationItem__router-link"> 效果(Effect) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/material.html" class="NavigationItem__router-link"> 材质(Material) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/mesh.html" class="NavigationItem__router-link"> 网格(Mesh) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/texture.html" class="NavigationItem__router-link"> 纹理和图像(Texture) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/texture.html#立方体纹理" class="NavigationItem__router-link"> 立方体纹理(CubeTexture) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/texture.html#视频纹理" class="NavigationItem__router-link"> 视频纹理(VideoTexture) <span class="wedoc-beta-tag" style="margin-left:0;">Beta</span></a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/texture.html#使用纹理" class="NavigationItem__router-link"> 纹理使用约定 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/camera.html" class="NavigationItem__router-link"> 相机(Camera) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/render-texture.html" class="NavigationItem__router-link"> 渲染到纹理(RenderTexture) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/atlas.html" class="NavigationItem__router-link"> 图集(Atlas) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/env.html" class="NavigationItem__router-link"> 环境(EnvData) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/env.html#天空盒" class="NavigationItem__router-link"> 天空盒与背景(Skybox) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/light.html" class="NavigationItem__router-link"> 灯光(Light) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/light.html#阴影" class="NavigationItem__router-link"> 阴影(Shadow) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/render/post-process.html" class="NavigationItem__router-link"> 后处理(PostProcess) <span class="wedoc-beta-tag" style="margin-left:0;">Beta</span></a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/gltf/" class="NavigationItem__router-link"> GLTF </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/gltf/introduction.html" class="NavigationItem__router-link"> GLTF入门 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/gltf/specification.html" class="NavigationItem__router-link"> 使用说明 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/gltf/gallery.html" class="NavigationItem__router-link"> 画廊 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/" class="NavigationItem__router-link"> AR </a>  </span></div> <ul class="NavigationLevel__children"><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/" class="NavigationItem__router-link"> AR系统(ARSystem) </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/#识别模式" class="NavigationItem__router-link"> 识别模式 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/#深度遮挡" class="NavigationItem__router-link"> 深度遮挡(DepthMask) <span class="wedoc-beta-tag" style="margin-left:0;">Beta</span></a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/#ARCamera" class="NavigationItem__router-link"> AR相机(ARCamera) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/#AR场景事件" class="NavigationItem__router-link"> AR场景事件 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/#不同AR追踪器的坐标系差异" class="NavigationItem__router-link"> 不同AR追踪器的坐标系差异 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-3"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html" class="NavigationItem__router-link"> AR追踪器(ARTracker) </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#二维Marker" class="NavigationItem__router-link"> 2D Marker(Marker) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#三维Marker" class="NavigationItem__router-link"> 3D Marker(Marker) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#OSD" class="NavigationItem__router-link"> OSD Marker(OSD) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#Plane" class="NavigationItem__router-link"> 平面识别(Plane) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#PlaneMarker" class="NavigationItem__router-link"> 平面识别结合Marker(Plane) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#threeDof" class="NavigationItem__router-link"> 3自由度(threeDof) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#Face" class="NavigationItem__router-link"> 人脸识别(Face) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#Body" class="NavigationItem__router-link"> 躯体识别(Body) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#Hand" class="NavigationItem__router-link"> 人手识别(Hand) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/ar/tracker.html#获取追踪状态" class="NavigationItem__router-link"> 获取追踪状态(TrackState) </a>  </span></li></ul></div></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/animation/" class="NavigationItem__router-link"> 动画 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/animation/" class="NavigationItem__router-link"> 动画系统(AnimationSystem) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/animation/#动画实现" class="NavigationItem__router-link"> 动画实现(Animation) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/animation/#动画组件" class="NavigationItem__router-link"> 动画组件(Animator) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/animation/keyframe.html" class="NavigationItem__router-link"> 帧动画(KeyframeAnimation) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/gltf/specification.html#gltf动画" class="NavigationItem__router-link"> gltf动画(ModelAnimation) </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/physics/" class="NavigationItem__router-link"> 交互和物理 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/physics/" class="NavigationItem__router-link"> 物理系统(PhysicSystem) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/physics/shape.html" class="NavigationItem__router-link"> 轮廓(Shape) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/physics/rigidbody.html" class="NavigationItem__router-link"> 刚体(Rigidbody) <span class="wedoc-beta-tag" style="margin-left:0;">Beta</span></a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/physics/interact.html" class="NavigationItem__router-link"> 轮廓交互(interact) <span class="wedoc-beta-tag" style="margin-left:0;">Beta</span></a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/particles/" class="NavigationItem__router-link"> 粒子 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/particles/" class="NavigationItem__router-link"> 粒子系统(Particles) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/particles/emiter.html" class="NavigationItem__router-link"> 发射器(Emitter) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/particles/attribute.html" class="NavigationItem__router-link"> 其他属性和动画 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/share/" class="NavigationItem__router-link"> 分享 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/share/" class="NavigationItem__router-link"> 分享系统(ShareSystem) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/share/#截取画布" class="NavigationItem__router-link"> 截取画布(Capture) </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/share/#录制画布" class="NavigationItem__router-link"> 录制画布(Record) </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/builtin/env.html" class="NavigationItem__router-link"> 内置资源 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/builtin/env.html" class="NavigationItem__router-link"> 内置环境数据 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/builtin/geometry.html" class="NavigationItem__router-link"> 内置几何数据 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/builtin/texture.html" class="NavigationItem__router-link"> 内置纹理资源 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/builtin/effect.html" class="NavigationItem__router-link"> 内置效果资源 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/builtin/effect-simple.html" class="NavigationItem__router-link"> Simple效果 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/builtin/effect-standard.html" class="NavigationItem__router-link"> Standard效果 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/builtin/atlas.html" class="NavigationItem__router-link"> 内置图集 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/builtin/post-process.html" class="NavigationItem__router-link"> 内置后处理 </a>  </span></li></ul></div></li><li><div class="NavigationLevel NavigationLevel--closed NavigationLevel--level-2"><div class="NavigationLevel__parent"><span class="NavigationToggle NavigationToggle--closed"><span class="NavigationToggle__icon NavigationToggle__icon--closed"></span></span> <span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/tools/cli.html" class="NavigationItem__router-link"> 工具 </a>  </span></div> <ul class="NavigationLevel__children"><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/tools/debug.html#真机调试" class="NavigationItem__router-link"> 真机调试 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/tools/toolkit.html#环境数据生成" class="NavigationItem__router-link"> 环境数据生成 </a>  </span></li><li><span class="NavigationItem"> <a href="/miniprogram/dev/component/xr-frame/tools/toolkit.html#gltf优化" class="NavigationItem__router-link"> gltf优化 </a>  </span></li></ul></div></li></ul></div></li></ul></div></div> </aside></div> <div class="page__wrp"><main class="page"><div class="page-inner" style="min-height:0px;"> <div id="docContent"><div class="Breadcrumb"></div> <div class="content custom"><h1 id="grid-builder"><a href="#grid-builder" class="header-anchor">#</a> grid-builder</h1> <blockquote><p>基础库 3.4.0 开始支持，低版本需做<a href="../../analysis/experience/compatibility.html">兼容处理</a>。</p></blockquote> <blockquote><p>相关文档: <a href="../framework/runtime/skyline/introduction.html">Skyline 渲染引擎</a>、<a href="../framework/custom-component/glass-easel/migration.html">Skyline 迁移起步</a></p></blockquote> <p class="wedoc-support-tips">渲染框架支持情况：Skyline （使用最新 <a href="/miniprogram/dev/devtools/nightly.html">Nighly</a> 工具调试）</p> <h2 id="功能描述"><a href="#功能描述" class="header-anchor">#</a> 功能描述</h2> <p>网格构造器，仅支持作为 <code><scroll-view type="custom"></code> 模式的直接子节点。具体用法可参考 <a href="scroll-view.html#列表构造器使用方法">scroll-view</a></p> <h2 id="通用属性"><a href="#通用属性" class="header-anchor">#</a> 通用属性</h2> <div class="table-wrp"><table class="have-children-table"><thead><tr><th></th> <th>属性</th> <th>类型</th> <th>默认值</th> <th>必填</th> <th>说明</th></tr></thead> <tbody><tr><td><i class="toggle-children-table"></i></td> <td>padding</td> <td>Array</td> <td>[0, 0, 0, 0]</td> <td>否</td> <td>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距</td></tr> <tr><td><i class="toggle-children-table"></i></td> <td>list</td> <td>Array</td> <td></td> <td>是</td> <td>需要用于渲染的列表</td></tr> <tr><td><i class="toggle-children-table"></i></td> <td>child-count</td> <td>Array</td> <td></td> <td>否</td> <td>完整列表的长度，如果不传则取 list 的长度作为其值</td></tr> <tr class="have-children-tr show-children"><td><i class="toggle-children-table"></i></td> <td>type</td> <td>string</td> <td>aligned</td> <td>是</td> <td>布局方式</td></tr> <tr class="children-table"><td><i class="toggle-children-table"></i></td> <td colspan="5"><table><thead><tr><th style="width: 20%;">合法值</th> <th>说明</th></tr></thead> <tbody><tr><td>aligned</td> <td>每行高度由同一行中最大高度子节点决定</td></tr> <tr><td>masonry</td> <td>瀑布流，根据子元素高度自动布局</td></tr></tbody></table></td></tr> <tr><td><i class="toggle-children-table"></i></td> <td>cross-axis-count</td> <td>number</td> <td>2</td> <td>否</td> <td>交叉轴元素数量</td></tr> <tr><td><i class="toggle-children-table"></i></td> <td>max-cross-axis-extent</td> <td>number</td> <td>0</td> <td>否</td> <td>交叉轴元素最大范围</td></tr> <tr><td><i class="toggle-children-table"></i></td> <td>main-axis-gap</td> <td>number</td> <td>0</td> <td>否</td> <td>主轴方向间隔</td></tr> <tr><td><i class="toggle-children-table"></i></td> <td>cross-axis-gap</td> <td>number</td> <td>0</td> <td>否</td> <td>交叉轴方向间隔</td></tr> <tr><td><i class="toggle-children-table"></i></td> <td>binditembuild</td> <td>eventhandle</td> <td></td> <td>否</td> <td>列表项创建时触发，event.detail = {index}，index 即被创建的列表项序号</td></tr> <tr><td><i class="toggle-children-table"></i></td> <td>binditemdispose</td> <td>eventhandle</td> <td></td> <td>否</td> <td>列表项回收时触发，event.detail = {index}，index 即被回收的列表项序号</td></tr></tbody></table></div> <h2 id="Bug-Tip"><a href="#Bug-Tip" class="header-anchor">#</a> Bug & Tip</h2> <ol><li><code>tip</code>: 目前只支持纵向滚动列表</li> <li><code>bug</code>: 目前 <code>grid-builder</code> 在进入屏幕后不允许再被滚动出屏幕，否则会被判定成列表需要重新布局进而自动滚动到 <code>grid-builder</code> 的顶端</li></ol> <h2 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>scroll-view</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span> <span class="token attr-name">scroll-y</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>grid-builder</span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{list}}<span class="token punctuation">"</span></span> <span class="token attr-name">child-count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{list.length}}<span class="token punctuation">"</span></span> <span class="token attr-name">cross-axis-count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">cross-axis-gap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">main-axis-gap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name"><span class="token namespace">slot:</span>item</span> <span class="token attr-name"><span class="token namespace">slot:</span>index</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span><span class="token punctuation">></span></span>{{item.id}}-{{index}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>grid-builder</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>scroll-view</span><span class="token punctuation">></span></span> </code></pre></div></div> <div class="fixed-translate" style="display:none;"><span>The translations are provided by WeChat Translation and are for reference only. In case of any inconsistency and discrepancy between the Chinese version and the English version, the Chinese version shall prevail.Incorrect translation. <a href="javascript:;" class="fixed-translate-btn">Tap to report.</a></span></div></div>  <div class="related"> </div> <footer class="page-edit"></footer> <footer class="footer"><ul class="footer-links"><li class="footer-link"><a href="http://www.tencent.com/zh-cn/index.shtml" target="_blank">关于腾讯</a></li> <li class="footer-link"><a href="https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=1484641676" target="_blank">文档中心</a></li> <li class="footer-link"><a href="https://kf.qq.com/faq/17030722muuu170307MFBny2.html" target="_blank">辟谣中心</a></li> <li class="footer-link"><a href="http://kf.qq.com/faq/120911VrYVrA1509086vyumm.html" target="_blank">客服中心</a></li></ul> <p class="copyright">Copyright © 2012-<span>2025</span> Tencent. All Rights Reserved.</p></footer></div></main></div> </div></div> <div id="popoverWrapId" class="pop-links__wrp popover_hide"><ul class="pop-links__list"><li class="pop-links__item"><button class="pop-link">复制</button></li> <li class="pop-links__item"><button class="pop-link">问题反馈</button></li></ul></div> <div class="fixed-btns"><a href="javascript:;" class="fixed-btn fixed-btn__feedback"><div class="fixed-btn__inner"><span class="fixed-btn__icon"></span> <span class="fixed-btn__text">反馈</span></div></a> <a href="javascript:;" class="fixed-btn fixed-btn__top" style="display:none;"><div class="fixed-btn__inner"><span class="fixed-btn__icon"></span></div></a></div></div></div></div> <script src="https://res.wx.qq.com/wxdoc/dist/assets/js/app.6ab6bfc0.js" defer></script><script src="https://res.wx.qq.com/wxdoc/dist/assets/js/2090.80282027.js" defer></script> </body> </html>