tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/component/page-container.md

@@ -0,0 +1,386 @@
+::: sourceCode
+## page-container
+
+> 组件类型：UniPageContainerElement 
+
+ 页面容器组件。用于创建弹出层，支持拦截返回操作
+
+page-container 的特点：
+- 与普通前端popup类组件相比，page-container组件能响应返回操作。返回操作具体指：右滑手势、安卓物理返回键、和调用 `navigateBack` 接口三种返回情形。小程序未提供监听返回的API，想实现返回操作关闭弹层而不是页面，只能使用page-container组件。
+- 与[dialogPage](../api/dialog-page.md)相比，`page-container` 是组件而不是页面；`page-container` 跨端，而 dialogPage 不支持小程序；dialogPage 支持覆盖pages.json中定义的顶部导航栏和tabbar，而 `page-container`不支持。
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 5.02 | 4.41 | 5.02 | 5.02 | 5.02 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| show | boolean | false | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 是否显示容器组件 |
+| duration | number | 300 | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 动画时长，单位毫秒 |
+| z-index | number | 100 | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | z-index 层级 |
+| overlay | boolean | true | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 是否显示遮罩层 |
+| round | boolean | false | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 是否显示圆角 |
+| position | top \| left \| bottom \| right \| center | "bottom" | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 弹出位置 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| top | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 顶部 |
+| left | Web 5.02 / 微信小程序 x / Android 5.02 / iOS 5.02 / HarmonyOS 5.02（部分支持，见上） | 左侧 |
+| bottom | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 底部 |
+| right | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 右侧 |
+| center | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 居中 |
+| close-on-slide-down | boolean | false | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 是否在下滑一段距离后关闭 |
+| overlay-style | string(string.CSSString) |   | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 自定义遮罩层样式 |
+| custom-style | string(string.CSSString) |   | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 自定义弹出层样式 |
+| @beforeenter | eventhandle |   | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | *(eventhandle)*<br/>进入前触发 |
+| @enter | eventhandle |   | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | *(eventhandle)*<br/>进入中触发 |
+| @afterenter | eventhandle |   | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | *(eventhandle)*<br/>进入后触发 |
+| @beforeleave | eventhandle |   | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | *(eventhandle)*<br/>离开前触发 |
+| @leave | eventhandle |   | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | *(eventhandle)*<br/>离开中触发 |
+| @afterleave | eventhandle |   | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | *(eventhandle)*<br/>离开后触发 |
+| @clickoverlay | (event: UniPointerEvent) => void |   | Web 5.02 / 微信小程序 4.41 / Android 5.02 / iOS 5.02 / HarmonyOS 5.02 | 点击遮罩层时触发 |
+
+### Tips
+- uni ui组件库中曾广泛使用的uni-popup组件，在uni-app x中推荐改用 page-container 组件替代
+- 组件支持拦截用户的返回操作，包括右滑手势、安卓物理返回键和调用 navigateBack API
+- iOS从屏幕左边滑入默认是关闭当前页面，如需改成关闭弹层，需在 pages.json 中配置`swipeBackAsBackPress`为true，把左滑关闭页面功能转为 `onBackPress`，才能关闭弹层。此功能需 5.21+ iOS平台 蒸汽模式 [文档](https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html#pagesoptionspage-style)
+- Web 设置 `overlay: true` 时，组件会禁止背景页面滚动，避免滚动穿透
+- 小程序 `uni.navigateBack` 无法在页面栈顶调用，此时没有上一级页面
+- 小程序不支持 `左侧弹出`，App 和 Web 支持
+- 小程序 `enter` 和 `leave` 相关事件的回调函数有参数 `event`，App 和 Web 平台没有
+- 开启 `closeOnSlideDown` 后，小程序需要快速下滑才生效，而 App 和 Web 会跟着手指拖动滑动
+- 小程序页面最多只有1个 `page-container`，已存在 `page-container` 时无法再弹出新的 `page-container`。支付宝小程序同一页面存在多个 `page-container` 时，第二个及后续打开的 `page-container` 可能无法弹出。App 和 Web 支持弹出多个 `page-container` 组件，后弹覆盖先弹。
+- Web 暂不支持拦截侧滑返回和浏览器的后退按钮
+- `overlay-style` 设置 `pointer-events: none` 可以实现点击遮罩层不关闭弹窗
+- 居中弹出为全屏显示。此行为是为了对齐小程序的表现。由于遮罩层被覆盖，并不会触发 `click-overlay` 事件，可以自行调整 `custom-style` 的样式来规避此行为
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/page-container/page-container.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/page-container/page-container.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/page-container/page-container
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/page-container/page-container
+
+>示例
+```vue
+<template>
+  <scroll-view class="uni-theme-root" style="flex: 1">
+    <page-intro
+      content="本页演示 page-container 页面容器，用于在页面内创建弹出层效果，支持拦截返回操作：顶部/底部/左侧/右侧/居中弹出、圆角、遮罩与透明蒙层、下滑关闭等能力，通过按钮触发不同展示。"></page-intro>
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 弹出位置 </text>
+      </view>
+      <view>
+        <button @click="showContainer('top', '顶部')">顶部弹出</button>
+        <button class="mt-5" @click="showContainer('bottom', '底部')">底部弹出</button>
+        <button id="right-button" class="mt-5" @click="showContainer('right', '右侧')">右侧弹出</button>
+        
+        <button class="mt-5" @click="showContainer('left', '左侧')">左侧弹出</button>
+        
+        <button class="mt-5" @click="showContainer('center', '居中')">居中弹出</button>
+      </view>
+    </view>
+
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 跟随元素对齐 </text>
+      </view>
+      <view>
+        <button id="align-left-button" @click="showAlignLeft">下方左对齐</button>
+        <button id="align-center-button" class="mt-5" @click="showAlignCenter">下方水平居中</button>
+        <button id="align-right-button" class="mt-5" @click="showAlignRight">下方右对齐</button>
+      </view>
+    </view>
+
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 弹窗圆角 </text>
+      </view>
+      <view>
+        <button id="round-button" @click="showRound"> 开启圆角 </button>
+        <button id="close-round-button" class="mt-5" @click="closeRound"> 关闭圆角 </button>
+      </view>
+    </view>
+
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 遮罩层 </text>
+      </view>
+      <view>
+        <button @click="showOverlay(false)">不显示蒙层</button>
+        <button class="mt-5" @click="showOverlay(true)">显示蒙层</button>
+        <button class="mt-5" @click="showTransparentOverlay">透明蒙层</button>
+        <button class="mt-5" @click="showGreenTransparentOverlay">绿色半透明蒙层</button>
+        
+        <button class="mt-5" @click="showOverlayPointerEventsNone">蒙层穿透（点击蒙层不关闭）</button>
+        
+      </view>
+    </view>
+
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 自动隐藏 </text>
+      </view>
+      <view>
+        <button @click="autoClose">2秒后自动关闭</button>
+      </view>
+    </view>
+
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 滚动穿透 </text>
+      </view>
+      <view>
+        <button @click="showScrollThrough">打开滚动穿透测试弹层</button>
+        <text class="slider-down-info">测试弹层内滚动到顶部或底部时是否会影响主页面滚动</text>
+      </view>
+    </view>
+
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 下滑关闭 </text>
+      </view>
+      <view>
+        <button @click="showSlideDown">支持下滑关闭</button>
+        <text class="slider-down-info">提示: 当 close-on-slide-down=true 时，可下滑关闭容器</text>
+      </view>
+    </view>
+
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 其他方向滑动关闭 </text>
+      </view>
+      <view>
+        <button @click="showSlideClose('left')">左滑关闭</button>
+        <button class="mt-5" @click="showSlideClose('right')">右滑关闭</button>
+        <button class="mt-5" @click="showSlideClose('top')">上滑关闭</button>
+        <text class="slider-down-info">提示: close-on-slide-down=true 时，关闭方向由 position 决定</text>
+      </view>
+    </view>
+
+    
+    <view class="uni-padding-wrap uni-common-mt" style="margin-bottom: 30px;">
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 多层堆叠测试 </text>
+      </view>
+      <view>
+        <button @click="showStackedLayer1">打开第1层弹层</button>
+      </view>
+    </view>
+    
+
+    <page-container 
+      v-if="containerShow"
+      
+      :show="containerShow" :position="containerPosition" :round="containerRound"
+      :overlay="containerOverlay" :overlay-style="containerOverlayStyle"
+      :custom-style="containerCustomStyle"
+      :close-on-slide-down="containerCloseOnSlideDown" @afterleave="onAfterLeave">
+      <view class="container">
+        <text class="container-title">{{ containerTitle }}</text>
+        <scroll-view v-if="enableScrollThrough" style="height: 200px;margin-bottom: 15px; padding: 10px;">
+          <text class="container-content">{{ containerContent }}</text>
+        </scroll-view>
+        <text v-else class="container-content">{{ containerContent }}</text>
+        <button @click="closeContainer" type="primary">关闭容器</button>
+        <button class="mt-5" @click="navigateBack">后退页面</button>
+      </view>
+    </page-container>
+
+    
+    
+    <page-container v-if="showStackedPop1" :show="showStackedPop1" position="center" @afterleave="closeStackedLayer1">
+      <view class="stacked-container stacked-container-level-1" style="width: 360px;">
+        <text class="container-title">第1层弹层</text>
+        <text class="container-content">这是第1层弹层,点击下方按钮可以打开第2层</text>
+        <view style="flex-direction: row; justify-content: space-around;">
+          <button @click="showStackedLayer2" size="default" type="primary">打开第2层</button>
+          <button @click="closeStackedLayer1" size="default">关闭本层</button>
+        </view>
+      </view>
+    </page-container>
+
+    
+    <page-container v-if="showStackedPop2" :show="showStackedPop2" position="center" @afterleave="closeStackedLayer2">
+      <view class="stacked-container stacked-container-level-2" style="width: 340px;">
+        <text class="container-title">第2层弹层</text>
+        <text class="container-content">这是第2层弹层,点击下方按钮可以打开第3层</text>
+        <view style="flex-direction: row; justify-content: space-around;">
+          <button @click="showStackedLayer3" size="default" type="primary">打开第3层</button>
+          <button @click="closeStackedLayer2" size="default">关闭本层</button>
+        </view>
+      </view>
+    </page-container>
+
+    
+    <page-container v-if="showStackedPop3" :show="showStackedPop3" position="center" @afterleave="closeStackedLayer3">
+      <view class="stacked-container stacked-container-level-3" style="width: 300px;">
+        <text class="container-title">第3层弹层</text>
+        <text class="container-content">这是第3层弹层,最顶层的弹层</text>
+        <button @click="closeStackedLayer3" size="default">关闭本层</button>
+      </view>
+    </page-container>
+    
+
+    
+    <page-container 
+      v-if="showAlignContainer"
+      
+      :show="showAlignContainer" position="center" overlay-style="background-color: rgba(0, 0, 0, 0.1);"
+      :custom-style="alignContainerStyle"
+      @afterleave="closeAlignContainer">
+      <view class="align-shell">
+        <view class="align-arrow" :style="alignArrowStyle"></view>
+        <view class="align-container">
+          <view class="align-menu-item" hover-class="align-menu-item-hover" @click="onAlignMenuClick('菜单1')">
+            <text class="align-menu-text">菜单1</text>
+          </view>
+          <view class="align-menu-item" hover-class="align-menu-item-hover" @click="onAlignMenuClick('菜单2')">
+            <text class="align-menu-text">菜单2</text>
+          </view>
+          <view class="align-menu-item align-menu-item-last" hover-class="align-menu-item-hover"
+            @click="closeAlignContainer">
+            <text class="align-menu-text">关闭</text>
+          </view>
+        </view>
+      </view>
+    </page-container>
+  </scroll-view>
+</template>
+
+
+
+<style scoped>
+  .container {
+    padding: 20px;
+    background-color: var(--list-background-color, #ffffff);
+    min-height: 300px;
+    min-width: 300px;
+  }
+
+  .container-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--text-color, #333);
+    margin-bottom: 10px;
+  }
+
+  .container-content {
+    font-size: 14px;
+    color: var(--active-color, #666);
+    margin-bottom: 15px;
+  }
+
+  .mt-5 {
+    margin-top: 5px;
+  }
+
+  .slider-down-info {
+    font-size: 12px;
+    color: var(--active-color, #999);
+    margin-top: 5px;
+    margin-bottom: 20px;
+  }
+
+  .stacked-container {
+    padding: 10px;
+    border-radius: 8px;
+    min-height: 150px;
+  }
+
+  .stacked-container-level-1 {
+    background-color: #ffffff;
+  }
+
+  .stacked-container-level-2 {
+    background-color: #f0f0f0;
+  }
+
+  .stacked-container-level-3 {
+    background-color: #e0e0e0;
+  }
+
+  .align-container {
+    background-color: var(--list-background-color, #ffffff);
+    width: 200px;
+    border-radius: 8px;
+    margin-top: -1px;
+  }
+
+  .align-menu-item {
+    padding: 12px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: var(--border-color, #eeeeee);
+  }
+
+  .align-menu-item-last {
+    border-bottom-width: 0;
+  }
+
+  .align-menu-text {
+    font-size: 14px;
+    color: var(--text-color, #333333);
+  }
+
+  .align-menu-item-hover {
+    background-color: var(--active-background-color, #f5f5f5);
+  }
+
+  .align-shell {
+    width: 200px;
+    padding-top: 7px;
+    position: relative;
+    background-color: transparent;
+  }
+
+  .align-arrow {
+    position: absolute;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #ffffff;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .container-content,
+    .slider-down-info {
+      color: #d0d0d0;
+    }
+
+    .stacked-container-level-1 {
+      background-color: #2d2d2d;
+    }
+
+    .stacked-container-level-2 {
+      background-color: #353535;
+    }
+
+    .stacked-container-level-3 {
+      background-color: #3b3b3b;
+    }
+
+    .align-arrow {
+      border-bottom-color: #2d2d2d;
+    }
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.page-container)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=page-container&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=page-container&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=page-container&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=page-container&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=page-container)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=page-container&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/page-meta.md

@@ -0,0 +1,79 @@
+::: sourceCode
+## page-meta
+
+页面元数据，用于设置页面的一些属性，如背景色、下拉刷新等
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| background-text-style | string | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 下拉背景字体、loading 图的样式，仅支持 dark 和 light |
+| background-color | string | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 窗口的背景色，必须为十六进制颜色值 |
+| background-color-top | string | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 顶部窗口的背景色，必须为十六进制颜色值，仅 iOS(uni-app) 支持 |
+| background-color-bottom | string | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 底部窗口的背景色，必须为十六进制颜色值，仅 iOS(uni-app) 支持 |
+| scroll-top | string | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 滚动位置，可以使用 px 或者 rpx 为单位，在被设置时，页面会滚动到对应位置（WebView 特有属性） |
+| scroll-duration | number | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 滚动动画时长（WebView 特有属性） |
+| page-style | string | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点 |
+| root-font-size | string | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小 |
+| root-background-color | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>页面内容的背景色，用于页面中的空白部分和页面大小变化 resize 动画期间的临时空闲区域 |
+| page-font-size | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>页面 page 的字体大小，可以设置为 `system` ，表示使用当前用户设置的微信字体大小 |
+| page-orientation | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>页面的方向，可为 `auto` `portrait` 或 `landscape` |
+| @resize | (event: UniEvent) => void | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 页面尺寸变化时会触发 resize 事件， event.detail = { size: { windowWidth, windowHeight } } |
+| @scroll | (event: UniEvent) => void | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 页面滚动时会触发 scroll 事件， event.detail = { scrollTop }（WebView 特有属性） |
+| @scrolldone | (event: UniEvent) => void | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 如果通过改变 scroll-top 属性来使页面滚动，页面滚动结束后会触发 scrolldone 事件（WebView 特有属性） |
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/page-meta/page-meta.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/page-meta/page-meta.uvue) 
+>
+> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 
+```uvue
+<template>
+  <page-meta
+    :background-text-style="data.bgTextStyle"
+    :background-color="data.bgColor"
+    :background-color-top="data.bgColorTop"
+    :background-color-bottom="data.bgColorBottom"
+    :scroll-top="data.scrollTop"
+    :scroll-duration="2000"
+    @scroll="scroll"
+    @scrolldone="scrolldone"
+    page-style="color: green"
+    root-font-size="30px"
+  >
+    <navigation-bar
+      :title="data.nbTitle"
+      :loading="data.nbLoading"
+      :front-color="data.nbFrontColor"
+      :background-color="data.nbBackgroundColor"
+    />
+  </page-meta>
+  <view class="content">
+    <page-intro content="本页演示 page-meta 与 navigation-bar：配置页面背景色、滚动、导航栏标题与样式，通过按钮触发滚动到指定位置并监听 scroll 与 scrolldone。"></page-intro>
+    <text class="title">页面内容</text>
+    <button @click="scrollTo">点击跳到 300px 处</button>
+    <view class="uni-list" v-for="(_, index) in 30" :key="index">
+      <view class="uni-list-cell">{{ index }}</view>
+    </view>
+  </view>
+</template>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.page-meta.page-meta)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/page-meta.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=page-meta&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=page-meta&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=page-meta&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=page-meta&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=page-meta)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=page-meta&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/pan-gesture-handler.md

@@ -0,0 +1,40 @@
+::: sourceCode
+## pan-gesture-handler
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| tag | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>声明手势协商时的组件标识 |
+| worklet:ongesture | eventhandler | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>手势识别成功的回调 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| state | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手势状态 |
+| absoluteX | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对于全局的 X 坐标 |
+| absoluteY | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对于全局的 Y 坐标 |
+| deltaX | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对上一次，X 轴方向移动的坐标 |
+| deltaY | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对上一次，Y 轴方向移动的坐标 |
+| velocityX | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手指离开屏幕时的横向速度（pixel per second) |
+| velocityY | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手指离开屏幕时的纵向速度（pixel per second) |
+| worklet:should-response-on-move | callback | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(callback)*<br/>手指移动过程中手势是否响应 |
+| worklet:should-accept-gesture | callback | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(callback)*<br/>手势是否应该被识别 |
+| simultaneous-handlers | Array.&lt;string&gt; | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array.&lt;string&gt;)*<br/>声明可同时触发的手势节点 |
+| native-view | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>代理的原生节点类型 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.pan-gesture-handler)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/pan-gesture-handler.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=pan-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=pan-gesture-handler&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=pan-gesture-handler&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=pan-gesture-handler&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=pan-gesture-handler)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=pan-gesture-handler&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/picker-view-column.md

@@ -0,0 +1,3 @@
+layout: SimpleLayout
+
+已迁移至 [picker-view](picker-view.md#picker-view-column)