refactor: 首页优化样式

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

+<template>
+	<view class="uni-collapse-item">
+		<view class="uni-collapse-item__title" @click="openCollapse(!is_open)">
+			<text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text>
+			<view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
+		</view>
+		<view ref="boxRef" class="uni-collapse-item__content">
+			<view ref="contentRef" class="uni-collapse-item__content-box">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+	import { $dispatch } from './util.uts'
+	export default {
+		name: "UniCollapseItem",
+		props: {
+			// 列表标题
+			title: {
+				type: String,
+				default: ''
+			},
+			open: {
+				type: Boolean,
+				default: false
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				height: 0,
+				is_open: this.open as boolean,
+				boxNode: null as Element | null,
+				contentNode: null as Element | null,
+			};
+		},
+		watch: {
+			open(value: boolean) {
+				// this.is_open = value
+				if (this.boxNode != null) {
+					this.openCollapse(value)
+				}
+			}
+		},
+		created() {
+			$dispatch(this, 'UniCollapse', 'init', this)
+		},
+		mounted() {
+			this.boxNode = this.$refs['boxRef'] as Element;
+			this.contentNode = this.$refs['contentRef'] as Element;
+			// this.openCollapse(this.open)
+		},
+		methods: {
+			// 开启或关闭折叠面板
+			openCollapse(open: boolean) {
+				if (this.disabled) return
+				// 关闭其他已打开
+				$dispatch(this, 'UniCollapse', 'cloceAll')
+				this.is_open = open
+				this.openOrClose(open)
+			},
+			openOrClose(open: boolean) {
+				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);
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.uni-collapse-item {
+		background-color: #fff;
+	}
+	.uni-collapse-item__title {
+		flex-direction: row;
+		align-items: center;
+		padding: 12px;
+		background-color: #fff;
+	}
+
+	.down_arrow {
+		width: 8px;
+		height: 8px;
+		transform: rotate(45deg);
+		border-right: 1px #999 solid;
+		border-bottom: 1px #999 solid;
+		margin-top: -3px;
+		transition-property: transform;
+		transition-duration: 0.2s;
+	}
+
+	.down_arrow--active {
+		transform: rotate(-135deg);
+		margin-top: 0px;
+	}
+
+	.uni-collapse-item__title-text {
+		flex: 1;
+		color: #000;
+		font-size: 14px;
+		font-weight: 400;
+	}
+
+	.open--active {
+		/* background-color: #f0f0f0; */
+		color: #bbb;
+	}
+
+	.is-disabled {
+		color: #999;
+	}
+
+	.uni-collapse-item__content {
+		display: none;
+		position: relative;
+	}
+
+	.uni-collapse-item__content-box {
+		width: 100%;
+/* 		transition-property: transform , opacity;
+		transition-duration: 0.2s; */
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+</style>

components/uni-collapse-item/util.uts

+// 查找父组件实例
+export function $dispatch(
+	context : ComponentPublicInstance,
+	componentName : string,
+	eventName : string,
+	...params : any[]
+) {
+	let parent = context.$parent
+	let name = parent?.$options?.name
+	while (parent != null && (name == null || componentName != name)) {
+		parent = parent.$parent
+		if (parent != null) {
+			name = parent.$options.name
+		}
+	}
+	if (parent != null) {
+		parent.$callMethod(eventName, ...params)
+	}
+}

components/uni-collapse/uni-collapse.vue

+<template>
+	<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
+	<view>
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="uts">
+	export default {
+		name: "UniCollapse",
+		props: {
+			// 是否开启手风琴效果
+			accordion: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				child_nodes: [] as Array<ComponentPublicInstance>
+			};
+		},
+
+		methods: {
+			init(child: ComponentPublicInstance) {
+				this.child_nodes.push(child)
+			},
+			// 关闭所有
+			cloceAll() {
+				// 开启手风琴效果才回关闭其他
+				if (this.accordion && this.child_nodes.length > 0) {
+					this.child_nodes.forEach((item) => {
+						const is_open = item.$data['is_open'] as boolean
+						// TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
+						if (is_open) {
+							item.$data['is_open'] = false
+							item.$callMethod('openOrClose', false)
+						}
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/index.uvue

@@ -3,26 +3,18 @@
   <scroll-view style="flex: 1">
   <!-- #endif -->
     <view class="uni-container">
-      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
-        <view class="uni-panel-h" @click="triggerCollapse(item, index)">
-          <text class="uni-panel-text">{{ item.name }}</text>
-          <!-- <text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.open ? '&#xe581;' : '&#xe470;'}}</text> -->
-        </view>
-        <view class="uni-panel-c" v-if="item.open">
-          <view
-            class="uni-navigate-item"
-            v-for="page in item.pages"
-            :key="page.name"
-            @click="goDetailPage(item.id, page)">
-            <text
-              class="uni-navigate-text"
-              :class="page.enable != true ? 'text-disabled' : ''"
-              >{{ page.name }}</text
-            >
-            <!-- <text class="uni-navigate-icon uni-icon">&#xe470;</text> -->
-          </view>
-        </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(item.id, page)">
+              <text class="uni-navigate-text"
+                :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+              <view class="down_arrow"></view>
             </view>
+          </uni-collapse-item>
+        </template>
+      </uni-collapse>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
@@ -441,7 +433,7 @@
                 name: '嵌套组件通信',
                 url: 'nested-component-communication',
                 enable: true,
-              },{
+              }, {
                 name: '自定义组件中使用 class 定制另一个自定义组件根节点样式',
                 url: 'set-custom-child-component-root-node-class',
                 enable: true,
@@ -487,22 +479,18 @@
 </script>
 
 <style>
-.arrow {
+  .item {
+    margin-bottom: 12px;
+  }
+
+  .down_arrow {
     width: 8px;
     height: 8px;
-  border-top: 2px solid #ccc;
-  border-left: 2px solid #ccc;
-}
-
-.arrow-right {
-  transform: rotate(135deg);
-}
-
-.arrow-up {
     transform: rotate(45deg);
-}
-
-.arrow-down {
-  transform: rotate(-135deg);
-}
+    border-right: 1px #999 solid;
+    border-bottom: 1px #999 solid;
+    margin-top: -3px;
+    transition-property: transform;
+    transition-duration: 0.2s;
+  }
 </style>
\ No newline at end of file