feat: 折叠面板

App.uvue

@@ -30,11 +30,10 @@ export default {
     setLifeCycleNum(state.lifeCycleNum - 100)
     console.log('App Hide')
   },
-  onLastPageBackPress: function (): boolean | null {
+  onLastPageBackPress: function () {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum - 1000)
     console.log('App LastPageBackPress')
-    return null
   },
   methods: {
     increasetLifeCycleNum() {

components/uni-collapse-item/uni-collapse-item.vue

@@ -68,10 +68,12 @@
 				const boxNode = this.boxNode?.style!;
 				const contentNode = this.contentNode?.style!;
 				let hide = open ? 'flex' : 'none';
+				const opacity = open ? 1 : 0
 				let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
 				boxNode.setProperty('display', hide);
 				this.$nextTick(() => {
 					contentNode.setProperty('transform', ani_transform);
+					contentNode.setProperty('opacity', opacity);
 				})
 			}
 		}
@@ -131,5 +133,6 @@
 		transition-property: transform;
 		transition-duration: 0.3s;
 		transform: translateY(-100%);
+		opacity: 0;
 	}
 </style>
\ No newline at end of file

pages/tabBar/API.uvue

@@ -22,24 +22,6 @@
 				</template>
 			</uni-collapse>
 
-			<!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-				<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
-					<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
-					<image :src="
-              item.pages.length > 
-                ? item.open
-                  ? arrowUpIcon
-                  : arrowDownIcon
-                : arrowRightIcon
-            " class="uni-icon"></image>
-				</view>
-				<view class="uni-panel-c" v-if="item.open">
-					<view class="uni-navigate-item" 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"></image>
-					</view>
-				</view>
-			</view> -->
 		</view>
 		<!-- #ifdef APP -->
 	</scroll-view>

pages/tabBar/CSS.uvue

@@ -8,7 +8,7 @@
 			</view>
 			<view class="uni-hello-text">
 				<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
-				<u-link :href="'https://uniapp.dcloud.io/uni-app-x/css/'" :text="'https://uniapp.dcloud.io/uni-app-x/css/'" :inWhiteList="true"></u-link>
+				<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
 			</view>
 			<uni-collapse>
 				<template v-for="item in list" :key="item.id">
@@ -20,24 +20,6 @@
 					</uni-collapse-item>
 				</template>
 			</uni-collapse>
-			<!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-				<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
-					<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
-					<image :src="
-              item.pages.length > 0
-                ? item.open
-                  ? arrowUpIcon
-                  : arrowDownIcon
-                : arrowRightIcon
-            " class="uni-icon"></image>
-				</view>
-				<view class="uni-panel-c" v-if="item.open">
-					<view class="uni-navigate-item" 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"></image>
-					</view>
-				</view>
-			</view> -->
 		</view>
 		<!-- #ifdef APP -->
 	</scroll-view>
@@ -119,21 +101,6 @@
 							},
 						] as Page[],
 					},
-					{
-					  id: 'display',
-					  name: 'display',
-					  open: false,
-					  pages: [
-							{
-								name: 'flex',
-								url: '/pages/CSS/display/flex',
-							},
-							{
-								name: 'none',
-								url: '/pages/CSS/display/none',
-							}
-					  ] as Page[],
-					},
 					{
 						id: 'flex',
 						name: 'flex',
@@ -295,10 +262,6 @@
 								name: 'font-weight',
 								url: '/pages/CSS/text/font-weight',
 							},
-							{
-								name: 'letter-spacing',
-								url: '/pages/CSS/text/letter-spacing',
-							},
 							{
 								name: 'line-height',
 								url: '/pages/CSS/text/line-height',
@@ -318,33 +281,18 @@
 						] as Page[],
 					},
 					{
-						id: 'transform',
-						name: 'transform',
-						open: false,
-						pages: [
-							{
-								name: 'translate',
-								url: '/pages/CSS/transform/translate',
-							},
-							{
-								name: 'scale',
-								url: '/pages/CSS/transform/scale',
-							},
-							{
-								name: 'rotate',
-								url: '/pages/CSS/transform/rotate',
-							},
-						] as Page[],
-					},
-					{
-						id: 'transition',
-						name: 'transition',
+						id: 'animate',
+						name: '动画',
 						open: false,
 						pages: [
 							{
 								name: 'transition',
 								url: '/pages/CSS/transition/transition',
 							},
+							{
+								name: 'transform',
+								url: '/pages/CSS/transform/transform',
+							},
 						] as Page[],
 					},
 				] as ListItem[],

pages/tabBar/component.uvue

@@ -20,24 +20,6 @@
 					</uni-collapse-item>
 				</template>
 			</uni-collapse>
-			<!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-				<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
-					<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
-					<image :src="
-              item.pages.length > 0
-                ? item.open
-                  ? arrowUpIcon
-                  : arrowDownIcon
-                : arrowRightIcon
-            " class="uni-icon"></image>
-				</view>
-				<view class="uni-panel-c" v-if="item.open">
-					<view class="uni-navigate-item" 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"></image>
-					</view>
-				</view>
-			</view> -->
 		</view>
 		<!-- #ifdef APP -->
 	</scroll-view>

pages/tabBar/template.uvue

@@ -41,6 +41,7 @@
         <view class="uni-panel-c" v-if="item.open">
           <view
             class="uni-navigate-item"
+						:hover-class="page.enable == false?'':'is--active'"
             v-for="(page, key) in item.pages"
             :key="key"
             @click="goDetailPage(page)"