feat: 折叠面板

7ddb94bb · mehaotian · 68113477 · 7ddb94bb · 7ddb94bb · 7ddb94bb
6 changed file
--- a/App.uvue
+++ b/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() {

--- a/components/uni-collapse-item/uni-collapse-item.vue
+++ b/components/uni-collapse-item/uni-collapse-item.vue
@@ -67,11 +67,13 @@
 			oepnOrClose(open: boolean) {
 				const boxNode = this.boxNode?.style!;
 				const contentNode = this.contentNode?.style!;
-				let hide = open ? 'flex' : 'none';
+				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('transform', ani_transform);
+					contentNode.setProperty('opacity', opacity);
 				})
 			}
 		}
@@ -130,6 +132,7 @@
 		width: 100%;
 		transition-property: transform;
 		transition-duration: 0.3s;
-		transform: translateY(-100%);
+		transform: translateY(-100%);
+		opacity: 0;
 	}
 </style>
\ No newline at end of file
--- a/pages/tabBar/API.uvue
+++ b/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>

--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
-<template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex: 1">
-		<!-- #endif -->
-		<view class="uni-container">
-			<view class="uni-header-logo">
-				<image class="uni-header-image" src="/static/cssIndex.png"></image>
-			</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>
+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+		<!-- #endif -->
+		<view class="uni-container">
+			<view class="uni-header-logo">
+				<image class="uni-header-image" src="/static/cssIndex.png"></image>
+			</view>
+			<view class="uni-hello-text">
+				<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
+				<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">
@@ -19,379 +19,327 @@
 						</view>
 					</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>
-	<!-- #endif -->
-</template>
-
-<script lang="ts">
-	type Page = {
-		name : string
-		enable ?: boolean
-		url ?: string
-	}
-	type ListItem = {
-		id : string
-		name : string
-		open : boolean
-		pages : Page[]
-		url ?: string
-		enable ?: boolean
-	}
-	export default {
-		data() {
-			return {
-				list: [
-					{
-						id: 'background',
-						name: 'background',
-						open: false,
-						pages: [
-							{
-								name: 'background-color',
-								url: '/pages/CSS/background/background-color',
-							},
-							{
-								name: 'background-image',
-								url: '/pages/CSS/background/background-image',
-							},
-						] as Page[],
-					},
-					{
-						id: 'border',
-						name: 'border',
-						open: false,
-						pages: [
-							{
-								name: 'border',
-								url: '/pages/CSS/border/border',
-							},
-							{
-								name: 'border-width',
-								url: '/pages/CSS/border/border-width',
-							},
-							{
-								name: 'border-style',
-								url: '/pages/CSS/border/border-style',
-							},
-							{
-								name: 'border-color',
-								url: '/pages/CSS/border/border-color',
-							},
-							{
-								name: 'border-radius',
-								url: '/pages/CSS/border/border-radius',
-							},
-							{
-								name: 'border属性复合示例',
-								url: '/pages/CSS/border/complex-border/complex-border',
-							},
-						] as Page[],
-					},
-					{
-						id: 'box-shadow',
-						name: 'box-shadow',
-						open: false,
-						pages: [
-							{
-								name: 'box-shadow',
-								url: '/pages/CSS/box-shadow/box-shadow',
-							},
-						] as Page[],
-					},
+			</uni-collapse>
+		</view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script lang="ts">
+	type Page = {
+		name : string
+		enable ?: boolean
+		url ?: string
+	}
+	type ListItem = {
+		id : string
+		name : string
+		open : boolean
+		pages : Page[]
+		url ?: string
+		enable ?: boolean
+	}
+	export default {
+		data() {
+			return {
+				list: [
+					{
+						id: 'background',
+						name: 'background',
+						open: false,
+						pages: [
+							{
+								name: 'background-color',
+								url: '/pages/CSS/background/background-color',
+							},
+							{
+								name: 'background-image',
+								url: '/pages/CSS/background/background-image',
+							},
+						] as Page[],
+					},
+					{
+						id: 'border',
+						name: 'border',
+						open: false,
+						pages: [
+							{
+								name: 'border',
+								url: '/pages/CSS/border/border',
+							},
+							{
+								name: 'border-width',
+								url: '/pages/CSS/border/border-width',
+							},
+							{
+								name: 'border-style',
+								url: '/pages/CSS/border/border-style',
+							},
+							{
+								name: 'border-color',
+								url: '/pages/CSS/border/border-color',
+							},
+							{
+								name: 'border-radius',
+								url: '/pages/CSS/border/border-radius',
+							},
+							{
+								name: 'border属性复合示例',
+								url: '/pages/CSS/border/complex-border/complex-border',
+							},
+						] as Page[],
+					},
+					{
+						id: 'box-shadow',
+						name: 'box-shadow',
+						open: false,
+						pages: [
+							{
+								name: 'box-shadow',
+								url: '/pages/CSS/box-shadow/box-shadow',
+							},
+						] as Page[],
+					},
+					{
+						id: 'flex',
+						name: 'flex',
+						open: false,
+						pages: [
+							{
+								name: 'align-content',
+								url: '/pages/CSS/flex/align-content',
+							},
+							{
+								name: 'align-items',
+								url: '/pages/CSS/flex/align-items',
+							},
+							{
+								name: 'flex-basis',
+								url: '/pages/CSS/flex/flex-basis',
+							},
+							{
+								name: 'flex-direction',
+								url: '/pages/CSS/flex/flex-direction',
+							},
+							{
+								name: 'flex-flow',
+								url: '/pages/CSS/flex/flex-flow',
+							},
+							{
+								name: 'flex-grow',
+								url: '/pages/CSS/flex/flex-grow',
+							},
+							{
+								name: 'flex-shrink',
+								url: '/pages/CSS/flex/flex-shrink',
+							},
+							{
+								name: 'flex',
+								url: '/pages/CSS/flex/flex',
+							},
+							{
+								name: 'justify-content',
+								url: '/pages/CSS/flex/justify-content',
+							},
+						] as Page[],
+					},
+					{
+						id: 'layout',
+						name: 'layout',
+						open: false,
+						pages: [
+							{
+								name: 'height',
+								url: '/pages/CSS/layout/height',
+							},
+							{
+								name: 'max-height',
+								url: '/pages/CSS/layout/max-height',
+							},
+							{
+								name: 'max-width',
+								url: '/pages/CSS/layout/max-width',
+							},
+							{
+								name: 'min-height',
+								url: '/pages/CSS/layout/min-height',
+							},
+							{
+								name: 'min-width',
+								url: '/pages/CSS/layout/min-width',
+							},
+							{
+								name: 'position',
+								url: '/pages/CSS/layout/position',
+							},
+							{
+								name: 'width',
+								url: '/pages/CSS/layout/width',
+							},
+							{
+								name: 'visibility',
+								url: '/pages/CSS/layout/visibility',
+							},
+						] as Page[],
+					},
+					{
+						id: 'margin',
+						name: 'margin',
+						open: false,
+						pages: [
+							{
+								name: 'margin-bottom',
+								url: '/pages/CSS/margin/margin-bottom',
+							},
+							{
+								name: 'margin-left',
+								url: '/pages/CSS/margin/margin-left',
+							},
+							{
+								name: 'margin-right',
+								url: '/pages/CSS/margin/margin-right',
+							},
+							{
+								name: 'margin-top',
+								url: '/pages/CSS/margin/margin-top',
+							},
+							{
+								name: 'margin',
+								url: '/pages/CSS/margin/margin',
+							},
+						] as Page[],
+					},
+					{
+						id: 'padding',
+						name: 'padding',
+						open: false,
+						pages: [
+							{
+								name: 'padding-bottom',
+								url: '/pages/CSS/padding/padding-bottom',
+							},
+							{
+								name: 'padding-left',
+								url: '/pages/CSS/padding/padding-left',
+							},
+							{
+								name: 'padding-right',
+								url: '/pages/CSS/padding/padding-right',
+							},
+							{
+								name: 'padding-top',
+								url: '/pages/CSS/padding/padding-top',
+							},
+							{
+								name: 'padding',
+								url: '/pages/CSS/padding/padding',
+							},
+						] as Page[],
+					},
+					{
+						id: 'text',
+						name: 'text',
+						open: false,
+						pages: [
+							{
+								name: 'color',
+								url: '/pages/CSS/text/color',
+							},
+							{
+								name: 'font-family',
+								url: '/pages/CSS/text/font-family',
+							},
+							{
+								name: 'font-size',
+								url: '/pages/CSS/text/font-size',
+							},
+							{
+								name: 'font-style',
+								url: '/pages/CSS/text/font-style',
+							},
+							{
+								name: 'font-weight',
+								url: '/pages/CSS/text/font-weight',
+							},
+							{
+								name: 'line-height',
+								url: '/pages/CSS/text/line-height',
+							},
+							{
+								name: 'text-align',
+								url: '/pages/CSS/text/text-align',
+							},
+							{
+								name: 'text-overflow',
+								url: '/pages/CSS/text/text-overflow',
+							},
+							{
+								name: 'text-decoration-line',
+								url: '/pages/CSS/text/text-decoration-line',
+							},
+						] 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: 'animate',
+						name: '动画',
+						open: false,
+						pages: [
+							{
+								name: 'transition',
+								url: '/pages/CSS/transition/transition',
+							},
+							{
+								name: 'transform',
+								url: '/pages/CSS/transform/transform',
+							},
+						] as Page[],
 					},
-					{
-						id: 'flex',
-						name: 'flex',
-						open: false,
-						pages: [
-							{
-								name: 'align-content',
-								url: '/pages/CSS/flex/align-content',
-							},
-							{
-								name: 'align-items',
-								url: '/pages/CSS/flex/align-items',
-							},
-							{
-								name: 'flex-basis',
-								url: '/pages/CSS/flex/flex-basis',
-							},
-							{
-								name: 'flex-direction',
-								url: '/pages/CSS/flex/flex-direction',
-							},
-							{
-								name: 'flex-flow',
-								url: '/pages/CSS/flex/flex-flow',
-							},
-							{
-								name: 'flex-grow',
-								url: '/pages/CSS/flex/flex-grow',
-							},
-							{
-								name: 'flex-shrink',
-								url: '/pages/CSS/flex/flex-shrink',
-							},
-							{
-								name: 'flex',
-								url: '/pages/CSS/flex/flex',
-							},
-							{
-								name: 'justify-content',
-								url: '/pages/CSS/flex/justify-content',
-							},
-						] as Page[],
-					},
-					{
-						id: 'layout',
-						name: 'layout',
-						open: false,
-						pages: [
-							{
-								name: 'height',
-								url: '/pages/CSS/layout/height',
-							},
-							{
-								name: 'max-height',
-								url: '/pages/CSS/layout/max-height',
-							},
-							{
-								name: 'max-width',
-								url: '/pages/CSS/layout/max-width',
-							},
-							{
-								name: 'min-height',
-								url: '/pages/CSS/layout/min-height',
-							},
-							{
-								name: 'min-width',
-								url: '/pages/CSS/layout/min-width',
-							},
-							{
-								name: 'position',
-								url: '/pages/CSS/layout/position',
-							},
-							{
-								name: 'width',
-								url: '/pages/CSS/layout/width',
-							},
-							{
-								name: 'visibility',
-								url: '/pages/CSS/layout/visibility',
-							},
-						] as Page[],
-					},
-					{
-						id: 'margin',
-						name: 'margin',
-						open: false,
-						pages: [
-							{
-								name: 'margin-bottom',
-								url: '/pages/CSS/margin/margin-bottom',
-							},
-							{
-								name: 'margin-left',
-								url: '/pages/CSS/margin/margin-left',
-							},
-							{
-								name: 'margin-right',
-								url: '/pages/CSS/margin/margin-right',
-							},
-							{
-								name: 'margin-top',
-								url: '/pages/CSS/margin/margin-top',
-							},
-							{
-								name: 'margin',
-								url: '/pages/CSS/margin/margin',
-							},
-						] as Page[],
-					},
-					{
-						id: 'padding',
-						name: 'padding',
-						open: false,
-						pages: [
-							{
-								name: 'padding-bottom',
-								url: '/pages/CSS/padding/padding-bottom',
-							},
-							{
-								name: 'padding-left',
-								url: '/pages/CSS/padding/padding-left',
-							},
-							{
-								name: 'padding-right',
-								url: '/pages/CSS/padding/padding-right',
-							},
-							{
-								name: 'padding-top',
-								url: '/pages/CSS/padding/padding-top',
-							},
-							{
-								name: 'padding',
-								url: '/pages/CSS/padding/padding',
-							},
-						] as Page[],
-					},
-					{
-						id: 'text',
-						name: 'text',
-						open: false,
-						pages: [
-							{
-								name: 'color',
-								url: '/pages/CSS/text/color',
-							},
-							{
-								name: 'font-family',
-								url: '/pages/CSS/text/font-family',
-							},
-							{
-								name: 'font-size',
-								url: '/pages/CSS/text/font-size',
-							},
-							{
-								name: 'font-style',
-								url: '/pages/CSS/text/font-style',
-							},
-							{
-								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',
-							},
-							{
-								name: 'text-align',
-								url: '/pages/CSS/text/text-align',
-							},
-							{
-								name: 'text-overflow',
-								url: '/pages/CSS/text/text-overflow',
-							},
-							{
-								name: 'text-decoration-line',
-								url: '/pages/CSS/text/text-decoration-line',
-							},
-						] 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',
-						open: false,
-						pages: [
-							{
-								name: 'transition',
-								url: '/pages/CSS/transition/transition',
-							},
-						] as Page[],
-					},
-				] as ListItem[],
-				arrowUpIcon: '/static/icons/arrow-up.png',
-				arrowDownIcon: '/static/icons/arrow-down.png',
-				arrowRightIcon: '/static/icons/arrow-right.png',
-			}
-		},
-		methods: {
-			triggerCollapse(index ?: number, item : ListItem) {
-				if (item.pages.length == 0) {
-					const page : Page = {
-						name: item.name,
-						enable: item.enable,
-						url: item.url,
-					}
-					this.goDetailPage(page)
-					return
-				}
-				for (var i = 0; i < this.list.length; ++i) {
-					if (index == i) {
-						this.list[i].open = !this.list[i].open
-					} else {
-						this.list[i].open = false
-					}
-				}
-			},
-			goDetailPage(e : Page) {
-				if (e.enable == false) {
-					uni.showToast({
-						icon: 'none',
-						title: '暂不支持',
-					})
-					return
-				}
-				const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
-				uni.navigateTo({
-					url,
-				})
-			},
-		},
-	}
-</script>
-
-<style>
+				] as ListItem[],
+				arrowUpIcon: '/static/icons/arrow-up.png',
+				arrowDownIcon: '/static/icons/arrow-down.png',
+				arrowRightIcon: '/static/icons/arrow-right.png',
+			}
+		},
+		methods: {
+			triggerCollapse(index ?: number, item : ListItem) {
+				if (item.pages.length == 0) {
+					const page : Page = {
+						name: item.name,
+						enable: item.enable,
+						url: item.url,
+					}
+					this.goDetailPage(page)
+					return
+				}
+				for (var i = 0; i < this.list.length; ++i) {
+					if (index == i) {
+						this.list[i].open = !this.list[i].open
+					} else {
+						this.list[i].open = false
+					}
+				}
+			},
+			goDetailPage(e : Page) {
+				if (e.enable == false) {
+					uni.showToast({
+						icon: 'none',
+						title: '暂不支持',
+					})
+					return
+				}
+				const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
+				uni.navigateTo({
+					url,
+				})
+			},
+		},
+	}
+</script>
+
+<style>
 	@import '../../common/uni-uvue.css';
 	.item {
 		margin-bottom: 12px;
-	}
-</style>
+	}
+</style>
\ No newline at end of file
--- a/pages/tabBar/component.uvue
+++ b/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>

--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -40,7 +40,8 @@
        </view>
        <view class="uni-panel-c" v-if="item.open">
          <view
-            class="uni-navigate-item"
+            class="uni-navigate-item"
+						:hover-class="page.enable == false?'':'is--active'"
            v-for="(page, key) in item.pages"
            :key="key"
            @click="goDetailPage(page)"