feat: 新增折叠面板效果

common/uni-uvue.css

@@ -124,7 +124,9 @@
 .uni-navigate-item:active {
     background-color: #f8f8f8;
 }
-
+.is--active {
+	 background-color: #f8f8f8;
+}
 .uni-navigate-text {
     color: #000000;
     font-size: 14px;

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

+<template>
+	<view class="uni-collapse-item">
+		<view class="uni-collapse-item__title" :class="{'open--active':is_open}" @click="openCollapse(!this.is_open)">
+			<text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled}">{{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>
+	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 INode | null,
+				contentNode: null as INode | 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 INode;
+			this.contentNode = this.$refs['contentRef'] as INode;
+			// this.openCollapse(this.open)
+		},
+		methods: {
+			// 开启或关闭折叠面板 
+			openCollapse(open: boolean) {
+				if (this.disabled) return
+				// 关闭其他已打开
+				$dispatch(this, 'UniCollapse', 'cloceAll')
+				this.is_open = open
+				this.oepnOrClose(open)
+			},
+			oepnOrClose(open: boolean) {
+				const boxNode = this.boxNode?.style!;
+				const contentNode = this.contentNode?.style!;
+				let hide = open ? 'flex' : 'none';
+				let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
+				boxNode.setProperty('display', hide);
+				this.$nextTick(() => {
+					contentNode.setProperty('transform', ani_transform);
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.uni-collapse-item {
+		background-color: #fff;
+	}
+	.uni-collapse-item__title {
+		flex-direction: row;
+		align-items: center;
+		line-height: 22px;
+		padding: 12px;
+		background-color: #fff;
+	}
+
+	.open--active {
+		background-color: #f0f0f0;
+	}
+
+	.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;
+	}
+
+	.is-disabled {
+		color: #999;
+	}
+
+	.uni-collapse-item__content {
+		display: none;
+		position: relative;
+	}
+
+	.uni-collapse-item__content-box {
+		width: 100%;
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transform: translateY(-100%);
+	}
+</style>
\ No newline at end of file

components/uni-collapse-item/util.uts

+// import { ComponentPublicInstance } from 'vue'
+
+// 查找父组件实例
+export function $dispatch(
+	context : ComponentPublicInstance,
+	componentName : string,
+	eventName : string,
+	...params : any | null
+) {
+	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)
+	}
+}
\ No newline at end of file

components/uni-collapse/uni-collapse.vue

+<template>
+	<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
+	<view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	// import { ComponentPublicInstance } from 'vue'
+	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.get('is_open') as boolean
+						// TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
+						if (is_open) {
+							item.$data.set('is_open', false)
+							item.$callMethod('oepnOrClose', false)
+						}
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

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/component/'"
-          :text="'https://uniapp.dcloud.io/component/'"
-          :inWhiteList="true"
-        ></u-link>
-      </view>
-      <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="
+	<!-- #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">
+					<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"></image>
+						</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 -->
+            " 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[],
-        },
-        {
-          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: 'animate',
-          name: '动画',
-          open: false,
-          pages: [
-            {
-              name: 'transition',
-              url: '/pages/CSS/transition/transition',
-            },
-            {
-              name: 'transform',
-              url: '/pages/CSS/transform/transform',
-            },
-          ] 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,
-      })
-    },
-  },
-}
+	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: 'animate',
+						name: '动画',
+						open: false,
+						pages: [
+							{
+								name: 'transition',
+								url: '/pages/CSS/transition/transition',
+							},
+							{
+								name: 'transform',
+								url: '/pages/CSS/transform/transform',
+							},
+						] 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>
-@import '../../common/uni-uvue.css';
-</style>
+	@import '../../common/uni-uvue.css';
+	.item {
+		margin-bottom: 12px;
+	}
+</style>
\ No newline at end of file

pages/tabBar/component.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/componentIndex.png"
-        ></image>
-      </view>
-      <view class="uni-hello-text">
-        <text class="hello-text"
-          >uni-app内置组件，展示样式仅供参考，文档详见：</text
-        >
-        <u-link
-          :href="'https://uniapp.dcloud.io/component/'"
-          :text="'https://uniapp.dcloud.io/component/'"
-          :inWhiteList="true"
-        ></u-link>
-      </view>
-      <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="
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+		<!-- #endif -->
+		<view class="uni-container">
+			<view class="uni-header-logo">
+				<image class="uni-header-image" src="/static/componentIndex.png"></image>
+			</view>
+			<view class="uni-hello-text">
+				<text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</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">
+					<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"></image>
+						</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 -->
+            " 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: 'view',
-          name: '视图容器',
-          open: false,
-          pages: [
-            {
-              name: 'view',
-            },
-            {
-              name: 'scroll-view',
-            },
-            {
-              name: 'swiper',
-            },
-            /*
-              {
-                name: 'movable-view',
-                enable: false
-              },
-              {
-                name: 'cover-view',
-                enable: false
-              },
-              */
-            {
-              name: 'list（新闻）',
-              url: '/pages/component/list-news/list',
-            },
-            {
-              name: 'list',
-              url: '/pages/component/long-list/long-list',
-            },
-            {
-              name: 'list-view-autotest',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'content',
-          name: '基础内容',
-          open: false,
-          pages: [
-            {
-              name: 'text',
-            },
-            {
-              name: 'rich-text',
-              enable: false,
-            },
-            {
-              name: 'progress',
-            },
-          ] as Page[],
-        },
-        {
-          id: 'form',
-          name: '表单组件',
-          open: false,
-          pages: [
-            {
-              name: 'button',
-            },
-            {
-              name: 'checkbox',
-            },
-            /* {
-                name: 'form',
-                enable: false
-              }, */
-            {
-              name: 'input',
-              /* }, {
-                  name: 'label',
-                  enable: false
-                }, {
-                  name: 'picker',
-                  enable: false */
-            },
-            {
-              name: 'picker-view',
-            },
-            {
-              name: 'radio',
-            },
-            {
-              name: 'slider',
-            },
-            {
-              name: 'slider-100',
-            },
-            {
-              name: 'switch',
-            },
-            {
-              name: 'textarea',
-            },
-            /*
-              {
-                name: 'editor',
-                enable: false
-              },
-              */
-          ] as Page[],
-        },
-        {
-            id: 'nav',
-            name: '导航',
-            open: false,
-            pages: [{
-              name: 'navigator',
-              enable: true
-            }] as Page[],
-        },
-        {
-          id: 'media',
-          name: '媒体组件',
-          open: false,
-          pages: [
-            {
-              name: 'image',
-              enable: true,
-            },
-            {
-              name: 'video',
-              enable: true,
-            },
-            {
-              name: 'animation-view',
-              enable: false,
-            },
-          ] as Page[],
-        },
-        /*
-          {
-            id: 'map',
-            name: '地图',
-            open: false,
-            pages: [
-              {
-                name: 'map',
-                enable: false
-              }
-            ] as Page[]
-          },
-          {
-            id: 'canvas',
-            name: '画布',
-            open: false,
-            pages: [
-              {
-                name: 'canvas'
-              }
-            ] as Page[]
-          },
-          */
-        {
-          id: 'web-view',
-          name: '网页',
-          open: false,
-          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: 'ad',
-            url: 'ad',
-            name: 'AD组件',
-            enable: false,
-            open: false,
-            pages: [] 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({
-          title: '暂不支持',
-          icon: 'none',
-        })
-        return
-      }
-      const url =
-        e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
-      uni.navigateTo({
-        url,
-      })
-    },
-  },
-}
+	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: 'view',
+						name: '视图容器',
+						open: false,
+						pages: [
+							{
+								name: 'view',
+							},
+							{
+								name: 'scroll-view',
+							},
+							{
+								name: 'swiper',
+							},
+							/*
+								{
+									name: 'movable-view',
+									enable: false
+								},
+								{
+									name: 'cover-view',
+									enable: false
+								},
+								*/
+							{
+								name: 'list（新闻）',
+								url: '/pages/component/list-news/list',
+							},
+							{
+								name: 'list',
+								url: '/pages/component/long-list/long-list',
+							},
+							{
+								name: 'list-view-autotest',
+							},
+						] as Page[],
+					},
+					{
+						id: 'content',
+						name: '基础内容',
+						open: false,
+						pages: [
+							{
+								name: 'text',
+							},
+							{
+								name: 'rich-text',
+								enable: false,
+							},
+							{
+								name: 'progress',
+							},
+						] as Page[],
+					},
+					{
+						id: 'form',
+						name: '表单组件',
+						open: false,
+						pages: [
+							{
+								name: 'button',
+							},
+							{
+								name: 'checkbox',
+							},
+							/* {
+									name: 'form',
+									enable: false
+								}, */
+							{
+								name: 'input',
+								/* }, {
+										name: 'label',
+										enable: false
+									}, {
+										name: 'picker',
+										enable: false */
+							},
+							{
+								name: 'picker-view',
+							},
+							{
+								name: 'radio',
+							},
+							{
+								name: 'slider',
+							},
+							{
+								name: 'slider-100',
+							},
+							{
+								name: 'switch',
+							},
+							{
+								name: 'textarea',
+							},
+							/*
+								{
+									name: 'editor',
+									enable: false
+								},
+								*/
+						] as Page[],
+					},
+					{
+						id: 'nav',
+						name: '导航',
+						open: false,
+						pages: [{
+							name: 'navigator',
+							enable: true
+						}] as Page[],
+					},
+					{
+						id: 'media',
+						name: '媒体组件',
+						open: false,
+						pages: [
+							{
+								name: 'image',
+								enable: true,
+							},
+							{
+								name: 'video',
+								enable: true,
+							},
+							{
+								name: 'animation-view',
+								enable: false,
+							},
+						] as Page[],
+					},
+					/*
+						{
+							id: 'map',
+							name: '地图',
+							open: false,
+							pages: [
+								{
+									name: 'map',
+									enable: false
+								}
+							] as Page[]
+						},
+						{
+							id: 'canvas',
+							name: '画布',
+							open: false,
+							pages: [
+								{
+									name: 'canvas'
+								}
+							] as Page[]
+						},
+						*/
+					{
+						id: 'web-view',
+						name: '网页',
+						open: false,
+						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: 'ad',
+							url: 'ad',
+							name: 'AD组件',
+							enable: false,
+							open: false,
+							pages: [] as Page[]
+						}
+						*/
+					{
+						id: 'general-attr-event',
+						name: '通用属性和事件',
+						open: false,
+						pages: [
+							{
+								name: '通用属性',
+								url: 'general-attr',
+								enable: false,
+							},
+							{
+								name: '通用事件',
+								url: '/pages/component/general-event/general-event',
+								enable: true,
+							},
+						] 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({
+						title: '暂不支持',
+						icon: 'none',
+					})
+					return
+				}
+				const url =
+					e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
+				uni.navigateTo({
+					url,
+				})
+			},
+		},
+	}
 </script>
 
 <style>
-@import '../../common/uni-uvue.css';
-</style>
+	@import '../../common/uni-uvue.css';
+
+	.item {
+		margin-bottom: 12px;
+	}
+
+</style>
\ No newline at end of file