From 4d2c365e1ad592d6c9bc4908db617fbe5bbdb449 Mon Sep 17 00:00:00 2001
From: shutao <shutao@dcloud.io>
Date: Wed, 20 Mar 2024 12:32:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Enested-scroll-body=E3=80=81ne?=
 =?UTF-8?q?sted-scroll-header=E7=BB=84=E4=BB=B6=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  12 +
 .../nested-scroll-body.test.js                |  16 +
 .../nested-scroll-body.uvue                   | 113 +++
 .../nested-scroll-header.test.js              |  15 +
 .../nested-scroll-header.uvue                 |  82 +++
 pages/tabBar/component.uvue                   | 652 +++++++++---------
 6 files changed, 567 insertions(+), 323 deletions(-)
 create mode 100644 pages/component/nested-scroll-body/nested-scroll-body.test.js
 create mode 100644 pages/component/nested-scroll-body/nested-scroll-body.uvue
 create mode 100644 pages/component/nested-scroll-header/nested-scroll-header.test.js
 create mode 100644 pages/component/nested-scroll-header/nested-scroll-header.uvue

diff --git a/pages.json b/pages.json
index 6e5fc890..c0b661ea 100644
--- a/pages.json
+++ b/pages.json
@@ -1206,6 +1206,18 @@
         "enablePullDownRefresh": false
       }
     },
+    {
+      "path": "pages/component/nested-scroll-header/nested-scroll-header",
+      "style": {
+        "navigationBarTitleText": "nested-scroll-header"
+      }
+    },
+    {
+      "path": "pages/component/nested-scroll-body/nested-scroll-body",
+      "style": {
+        "navigationBarTitleText": "nested-scroll-body"
+      }
+    },
     // #endif
     // #ifdef APP || WEB
     {
diff --git a/pages/component/nested-scroll-body/nested-scroll-body.test.js b/pages/component/nested-scroll-body/nested-scroll-body.test.js
new file mode 100644
index 00000000..9463eaf8
--- /dev/null
+++ b/pages/component/nested-scroll-body/nested-scroll-body.test.js
@@ -0,0 +1,16 @@
+describe('component-native-nested-scroll-body', () => {
+  let page
+  beforeAll(async () => {
+    //打开lnested-scroll-body测试页
+    page = await program.reLaunch('/pages/component/nested-scroll-body/nested-scroll-body')
+    await page.waitFor(600)
+  })
+
+  //检测横向scroll_into_view属性赋值
+  it('check_scroll_into_view_left', async () => {
+    await page.callMethod('testBodyScrollBy', 400)
+    await page.waitFor(300)
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  })
+})
diff --git a/pages/component/nested-scroll-body/nested-scroll-body.uvue b/pages/component/nested-scroll-body/nested-scroll-body.uvue
new file mode 100644
index 00000000..3e484020
--- /dev/null
+++ b/pages/component/nested-scroll-body/nested-scroll-body.uvue
@@ -0,0 +1,113 @@
+<template>
+	<scroll-view style="flex:1" type="nested" direction="vertical" refresher-enabled="true" refresher-default-style="none"
+      bounces="false" :refresher-triggered="refresherTriggered" @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh" @refresherrestore="onRefreshrestore">
+    <nested-scroll-header>
+      <swiper ref="header" indicator-dots="true" circular="true">
+        <swiper-item  v-for="i in 3" :item-id="i">
+          <image src="/static/shuijiao.jpg" style="width:100% ;height: 240px;"></image>
+        </swiper-item>
+      </swiper>
+    </nested-scroll-header>
+    <nested-scroll-body>
+      <view style="flex:1">
+        <view style="flex-direction: row;">
+          <text style="padding: 12px 15px;">nested-scroll-body</text>
+        </view>
+        <!-- 嵌套滚动仅可能关闭bounces效果 会影响嵌套滚动不连贯 -->
+        <list-view bounces="false" id="body-list" :scroll-top="scrollTop" style="flex:1" associative-container="nested-scroll-view">
+          <list-item v-for="key in scrollData">
+          	<view class="scroll-item">
+          		<text class="scroll-item-title">{{key}}</text>
+          	</view>
+          </list-item>
+        </list-view>
+      </view>
+      <text>不会渲染，因为 nested-scroll-body 只会渲染第一个子节点</text>
+    </nested-scroll-body>
+    <!-- 支持自定义样式下拉刷新slot组件 -->
+    <refresh-box slot="refresher" :state="state"></refresh-box>
+	</scroll-view>
+</template>
+
+<script>
+  import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';
+	export default {
+    components: { refreshBox },
+		data() {
+			return {
+          scrollData: [] as Array<string>,
+          scrollTop: 0,
+          refresherTriggered: false,
+          pullingDistance: 0,
+          resetting: false
+			}
+		},
+    computed: {
+    	state() : number {
+    		if (this.resetting) {
+    			return 3;
+    		}
+    		if (this.refresherTriggered) {
+    			return 2
+    		}
+    		if (this.pullingDistance > 45) {
+    			return 1
+    		} else {
+    			return 0;
+    		}
+    	}
+    },
+    onLoad() {
+    	let lists : Array<string> = []
+    	for (let i = 0; i < 30; i++) {
+    		lists.push("item---" + i)
+    	}
+    	this.scrollData = lists
+    },
+		methods: {
+      onRefresherpulling(e : RefresherEvent) {
+      	this.pullingDistance = e.detail.dy;
+      },
+      onRefresherrefresh() {
+      	this.refresherTriggered = true
+      	setTimeout(() => {
+      		this.refresherTriggered = false
+      		this.resetting = true;
+      	}, 1500)
+      },
+      onRefreshrestore() {
+        this.pullingDistance = 0
+      	this.resetting = false;
+      },
+      //自动化测试使用
+      testBodyScrollBy(y: number) {
+        this.scrollTop = y
+      }
+		}
+	}
+</script>
+
+<style>
+	.scroll-item {
+		margin-left: 6px;
+		margin-right: 6px;
+		margin-top: 6px;
+		background-color: #fff;
+		border-radius: 4px;
+	}
+
+	.scroll-item-title {
+		width: 100%;
+		height: 60px;
+		line-height: 60px;
+		text-align: center;
+		color: #555;
+	}
+
+  .scroll-header-tiem {
+    height: 200px;
+    background-color: #66ccff;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/pages/component/nested-scroll-header/nested-scroll-header.test.js b/pages/component/nested-scroll-header/nested-scroll-header.test.js
new file mode 100644
index 00000000..864d44b8
--- /dev/null
+++ b/pages/component/nested-scroll-header/nested-scroll-header.test.js
@@ -0,0 +1,15 @@
+describe('component-native-nested-scroll-header', () => {
+  let page
+  beforeAll(async () => {
+    //打开lnested-scroll-header测试页
+    page = await program.reLaunch('/pages/component/nested-scroll-header/nested-scroll-header')
+    await page.waitFor(600)
+  })
+
+
+  it('check_nested-scroll-header', async () => {
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  })
+})
+
diff --git a/pages/component/nested-scroll-header/nested-scroll-header.uvue b/pages/component/nested-scroll-header/nested-scroll-header.uvue
new file mode 100644
index 00000000..e0d3b7df
--- /dev/null
+++ b/pages/component/nested-scroll-header/nested-scroll-header.uvue
@@ -0,0 +1,82 @@
+<template>
+	<scroll-view style="flex:1" type="nested" direction="vertical">
+    <nested-scroll-header>
+      <view class="scroll-header-tiem1">
+        <text>会渲染的nested-scroll-header</text>
+      </view>
+      <view class="scroll-header-tiem1">
+        <text>不会渲染nested-scroll-header，因为 nested-scroll-header 只会渲染第一个子节点</text>
+      </view>
+    </nested-scroll-header>
+    <nested-scroll-header>
+      <swiper ref="header" indicator-dots="true" circular="true">
+        <swiper-item  v-for="i in 3" :item-id="i">
+          <view class="scroll-header-tiem2">
+            <text>如果存在多个头部节点，那么就使用多个 nested-scroll-header 来将其包裹</text>
+          </view>
+        </swiper-item>
+      </swiper>
+    </nested-scroll-header>
+    <nested-scroll-body>
+      <scroll-view style="flex:1" associative-container="nested-scroll-view">
+        <view v-for="key in scrollData">
+        	<view class="scroll-item">
+        		<text class="scroll-item-title">{{key}}</text>
+        	</view>
+        </view>
+      </scroll-view>
+    </nested-scroll-body>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+          scrollData: [] as Array<string>,
+			}
+		},
+    onLoad() {
+    	let lists : Array<string> = []
+    	for (let i = 0; i < 30; i++) {
+    		lists.push("item---" + i)
+    	}
+    	this.scrollData = lists
+    },
+		methods: {
+		}
+	}
+</script>
+
+<style>
+	.scroll-item {
+		margin-left: 6px;
+		margin-right: 6px;
+		margin-top: 6px;
+		background-color: #fff;
+		border-radius: 4px;
+	}
+
+	.scroll-item-title {
+		width: 100%;
+		height: 60px;
+		line-height: 60px;
+		text-align: center;
+		color: #555;
+	}
+
+  .scroll-header-tiem1 {
+    height: 200px;
+    background-color: #66ccff;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .scroll-header-tiem2 {
+    height: 100px;
+    background-color: #89ff8d;
+    align-items: center;
+    justify-content: center;
+  }
+
+</style>
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index d1f35590..8557ab8c 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -1,324 +1,330 @@
-<template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1" enable-back-to-top="true">
-  <!-- #endif -->
-    <view class="uni-container">
-      <view class="uni-header-logo">
-        <image class="uni-header-image" src="/static/componentIndex.png"></image>
-      </view>
-      <view class="uni-text-box">
-        <text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
-        <u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'"
-          :text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
-      </view>
-      <uni-collapse>
-        <template v-for="item in list" :key="item.id">
-          <uni-collapse-item :title="item.name" class="item">
-            <view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
-              v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
-              <text class="uni-navigate-text"
-                :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
-              <image :src="arrowRightIcon" class="uni-icon-size"></image>
-            </view>
-          </uni-collapse-item>
-        </template>
-      </uni-collapse>
-
-      <!-- #ifdef UNI-APP-X && APP-ANDROID -->
-      <uni-upgrade-center-app ref="upgradePopup" @show="upgradePopupShow" @close="upgradePopupClose" />
-      <!-- #endif -->
-    </view>
-  <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
-</template>
-
-<script lang="uts">
-  // #ifdef UNI-APP-X && APP-ANDROID
-  import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
-  // #endif
-
-  type Page = {
-    name : string
-    enable ?: boolean
-    url ?: string.PageURIString
-  }
-  type ListItem = {
-    id : string
-    name : string
-    pages : Page[]
-    url ?: string
-    enable ?: boolean
-  }
-  export default {
-    data() {
-      return {
-        list: [
-          {
-            id: 'view',
-            name: '视图容器',
-            pages: [
-              {
-                name: 'view',
-              },
-              {
-                name: 'scroll-view',
-              },
-              {
-                name: 'swiper',
-              },
-              /*
-                {
-                  name: 'movable-view',
-                  enable: false
-                },
-                {
-                  name: 'cover-view',
-                  enable: false
-                },
-                */
-              {
-                name: 'list-view',
-              },
-              {
-                name: 'sticky-header',
-              },
-              {
-                name: 'sticky-section',
-              },
-            ] as Page[],
-          },
-          {
-            id: 'content',
-            name: '基础内容',
-            pages: [
-              {
-                name: 'text',
-              },
-              {
-                name: 'rich-text',
-                enable: true,
-              },
-              {
-                name: 'progress',
-              },
-            ] as Page[],
-          },
-          {
-            id: 'form',
-            name: '表单组件',
-            pages: [
-              {
-                name: 'button',
-              },
-              {
-                name: 'checkbox',
-              },
-              {
-                name: 'form',
-              },
-              {
-                name: 'input',
-              },
-              /*
-              {
-                name: 'label',
-              }, {
-                name: 'picker',
-              },
-              */
-              {
-                name: 'picker-view',
-              },
-              {
-                name: 'radio',
-              },
-              {
-                name: 'slider',
-              },
-              {
-                name: 'slider-100',
-              },
-              {
-                name: 'switch',
-              },
-              {
-                name: 'textarea',
-              },
-              /*
-                {
-                  name: 'editor',
-                  enable: false
-                },
-                */
-            ] as Page[],
-          },
-          {
-            id: 'nav',
-            name: '导航',
-            pages: [{
-              name: 'navigator',
-              enable: true
-            }] as Page[],
-          },
-          {
-            id: 'media',
-            name: '媒体组件',
-            pages: [
-              {
-                name: 'image',
-                enable: true,
-              },
-              {
-                name: 'video',
-                enable: true,
-              },
-              /* {
-                name: 'animation-view',
-                enable: false,
-              }, */
-            ] as Page[],
-          },
-          // {
-          //   id: 'map',
-          //   name: '地图',
-          //   pages: [
-          //     {
-          //       name: 'map',
-          //       enable: false
-          //     }
-          //   ] as Page[]
-          // },
-          // {
-          //   id: 'canvas',
-          //   name: '画布',
-          //   pages: [
-          //     {
-          //       name: 'canvas'
-          //     }
-          //   ] as Page[]
-          // },
-          {
-            id: 'web-view',
-            name: '网页',
-            pages: [
-              {
-                name: '网络网页',
-                enable: true,
-                url: '/pages/component/web-view/web-view',
-              },
-              {
-                name: '本地网页',
-                enable: true,
-                url: '/pages/component/web-view-local/web-view-local',
-              },
-            ] as Page[],
-          },
-          {
-            id: 'unicloud-db',
-            name: 'unicloud-db',
-            pages: [
-              {
-                name: '联系人',
-                enable: true,
-                url: '/pages/component/unicloud-db-contacts/list'
-              },
-              {
-                name: 'mixinDatacom',
-                enable: true,
-                url: '/pages/component/mixin-datacom/mixin-datacom'
-              }
-            ] as Page[],
-          },
-          /*
-            {
-              id: 'ad',
-              url: 'ad',
-              name: 'AD组件',
-              enable: false,
-              pages: [] as Page[]
-            }
-            */
-          {
-            id: 'general-attr-event',
-            name: '通用属性和事件',
-            pages: [
-              {
-                name: '通用属性',
-                url: '/pages/component/general-attribute/general-attribute',
-                enable: true,
-              },
-              {
-                name: '通用事件',
-                url: '/pages/component/general-event/general-event',
-                enable: true,
-              },
-              {
-                name: 'touch事件',
-                url: '/pages/component/general-event/touch-event',
-                enable: true,
-              },
-              {
-                name: 'Transition事件',
-                url: '/pages/component/general-event/transition-event',
-                enable: true,
-              },
-            ] as Page[],
-          }
-        ] as ListItem[],
-        arrowUpIcon: '/static/icons/arrow-up.png' as string.ImageURIString,
-        arrowDownIcon: '/static/icons/arrow-down.png' as string.ImageURIString,
-        arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
-        pageHiden: false
-      }
-    },
-    methods: {
-      goDetailPage(e : Page) {
-        if (e.enable == false) {
-          uni.showToast({
-            title: '暂不支持',
-            icon: 'none'
-          })
-          return
-        }
-        const url =
-          e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
-        uni.navigateTo({
-          url,
-        })
-      }
-      // #ifdef UNI-APP-X && APP-ANDROID
-      , upgradePopupShow() {
-        console.log('upgradePopup show');
-        if (!this.pageHiden) {
-          uni.hideTabBar()?.catch(_ => { })
-        }
-      }
-      , upgradePopupClose() {
-        console.log('upgradePopup close');
-        uni.showTabBar()?.catch(_ => { })
-      }
-      // #endif
-    },
-    onReady() {
-      // #ifdef UNI-APP-X && APP-ANDROID
-      checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
-      // #endif
-    },
-    onShow() {
-      this.pageHiden = false
-    },
-    onHide() {
-      this.pageHiden = true
-    },
-    beforeUnmount() {
-      uni.showTabBar()?.catch(_ => { })
-    }
-  }
-</script>
-
-<style>
-  .item {
-    margin-bottom: 12px;
-  }
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1" enable-back-to-top="true">
+  <!-- #endif -->
+    <view class="uni-container">
+      <view class="uni-header-logo">
+        <image class="uni-header-image" src="/static/componentIndex.png"></image>
+      </view>
+      <view class="uni-text-box">
+        <text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
+        <u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'"
+          :text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
+      </view>
+      <uni-collapse>
+        <template v-for="item in list" :key="item.id">
+          <uni-collapse-item :title="item.name" class="item">
+            <view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
+              v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
+              <text class="uni-navigate-text"
+                :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+              <image :src="arrowRightIcon" class="uni-icon-size"></image>
+            </view>
+          </uni-collapse-item>
+        </template>
+      </uni-collapse>
+
+      <!-- #ifdef UNI-APP-X && APP-ANDROID -->
+      <uni-upgrade-center-app ref="upgradePopup" @show="upgradePopupShow" @close="upgradePopupClose" />
+      <!-- #endif -->
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+  // #ifdef UNI-APP-X && APP-ANDROID
+  import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
+  // #endif
+
+  type Page = {
+    name : string
+    enable ?: boolean
+    url ?: string.PageURIString
+  }
+  type ListItem = {
+    id : string
+    name : string
+    pages : Page[]
+    url ?: string
+    enable ?: boolean
+  }
+  export default {
+    data() {
+      return {
+        list: [
+          {
+            id: 'view',
+            name: '视图容器',
+            pages: [
+              {
+                name: 'view',
+              },
+              {
+                name: 'scroll-view',
+              },
+              {
+                name: 'swiper',
+              },
+              /*
+                {
+                  name: 'movable-view',
+                  enable: false
+                },
+                {
+                  name: 'cover-view',
+                  enable: false
+                },
+                */
+              {
+                name: 'list-view',
+              },
+              {
+                name: 'sticky-header',
+              },
+              {
+                name: 'sticky-section',
+              },
+              {
+                name: 'nested-scroll-header',
+              },
+              {
+                name: 'nested-scroll-body',
+              },
+            ] as Page[],
+          },
+          {
+            id: 'content',
+            name: '基础内容',
+            pages: [
+              {
+                name: 'text',
+              },
+              {
+                name: 'rich-text',
+                enable: true,
+              },
+              {
+                name: 'progress',
+              },
+            ] as Page[],
+          },
+          {
+            id: 'form',
+            name: '表单组件',
+            pages: [
+              {
+                name: 'button',
+              },
+              {
+                name: 'checkbox',
+              },
+              {
+                name: 'form',
+              },
+              {
+                name: 'input',
+              },
+              /*
+              {
+                name: 'label',
+              }, {
+                name: 'picker',
+              },
+              */
+              {
+                name: 'picker-view',
+              },
+              {
+                name: 'radio',
+              },
+              {
+                name: 'slider',
+              },
+              {
+                name: 'slider-100',
+              },
+              {
+                name: 'switch',
+              },
+              {
+                name: 'textarea',
+              },
+              /*
+                {
+                  name: 'editor',
+                  enable: false
+                },
+                */
+            ] as Page[],
+          },
+          {
+            id: 'nav',
+            name: '导航',
+            pages: [{
+              name: 'navigator',
+              enable: true
+            }] as Page[],
+          },
+          {
+            id: 'media',
+            name: '媒体组件',
+            pages: [
+              {
+                name: 'image',
+                enable: true,
+              },
+              {
+                name: 'video',
+                enable: true,
+              },
+              /* {
+                name: 'animation-view',
+                enable: false,
+              }, */
+            ] as Page[],
+          },
+          // {
+          //   id: 'map',
+          //   name: '地图',
+          //   pages: [
+          //     {
+          //       name: 'map',
+          //       enable: false
+          //     }
+          //   ] as Page[]
+          // },
+          // {
+          //   id: 'canvas',
+          //   name: '画布',
+          //   pages: [
+          //     {
+          //       name: 'canvas'
+          //     }
+          //   ] as Page[]
+          // },
+          {
+            id: 'web-view',
+            name: '网页',
+            pages: [
+              {
+                name: '网络网页',
+                enable: true,
+                url: '/pages/component/web-view/web-view',
+              },
+              {
+                name: '本地网页',
+                enable: true,
+                url: '/pages/component/web-view-local/web-view-local',
+              },
+            ] as Page[],
+          },
+          {
+            id: 'unicloud-db',
+            name: 'unicloud-db',
+            pages: [
+              {
+                name: '联系人',
+                enable: true,
+                url: '/pages/component/unicloud-db-contacts/list'
+              },
+              {
+                name: 'mixinDatacom',
+                enable: true,
+                url: '/pages/component/mixin-datacom/mixin-datacom'
+              }
+            ] as Page[],
+          },
+          /*
+            {
+              id: 'ad',
+              url: 'ad',
+              name: 'AD组件',
+              enable: false,
+              pages: [] as Page[]
+            }
+            */
+          {
+            id: 'general-attr-event',
+            name: '通用属性和事件',
+            pages: [
+              {
+                name: '通用属性',
+                url: '/pages/component/general-attribute/general-attribute',
+                enable: true,
+              },
+              {
+                name: '通用事件',
+                url: '/pages/component/general-event/general-event',
+                enable: true,
+              },
+              {
+                name: 'touch事件',
+                url: '/pages/component/general-event/touch-event',
+                enable: true,
+              },
+              {
+                name: 'Transition事件',
+                url: '/pages/component/general-event/transition-event',
+                enable: true,
+              },
+            ] as Page[],
+          }
+        ] as ListItem[],
+        arrowUpIcon: '/static/icons/arrow-up.png' as string.ImageURIString,
+        arrowDownIcon: '/static/icons/arrow-down.png' as string.ImageURIString,
+        arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
+        pageHiden: false
+      }
+    },
+    methods: {
+      goDetailPage(e : Page) {
+        if (e.enable == false) {
+          uni.showToast({
+            title: '暂不支持',
+            icon: 'none'
+          })
+          return
+        }
+        const url =
+          e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
+        uni.navigateTo({
+          url,
+        })
+      }
+      // #ifdef UNI-APP-X && APP-ANDROID
+      , upgradePopupShow() {
+        console.log('upgradePopup show');
+        if (!this.pageHiden) {
+          uni.hideTabBar()?.catch(_ => { })
+        }
+      }
+      , upgradePopupClose() {
+        console.log('upgradePopup close');
+        uni.showTabBar()?.catch(_ => { })
+      }
+      // #endif
+    },
+    onReady() {
+      // #ifdef UNI-APP-X && APP-ANDROID
+      checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
+      // #endif
+    },
+    onShow() {
+      this.pageHiden = false
+    },
+    onHide() {
+      this.pageHiden = true
+    },
+    beforeUnmount() {
+      uni.showTabBar()?.catch(_ => { })
+    }
+  }
+</script>
+
+<style>
+  .item {
+    margin-bottom: 12px;
+  }
 </style>
-- 
GitLab