template.uvue

<template>
	<view class="uni-container">
		<view class="uni-header-logo">
			<image class="uni-header-image" src="/static/templateIndex.png"></image>
		</view>
		<view class="uni-hello-text">
			<text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
			<u-link class="hello-link" href="https://ext.dcloud.net.cn" :text="'https://ext.dcloud.net.cn'"
				: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="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>
</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: "long-list",
						url: "long-list",
						name: "复杂长列表",
						open: false,
						enable: false,
						pages: [] as Page[]
					},{
						id: "scroll-fold-nav",
						url: "scroll-fold-nav",
						name: "随滚动折叠的导航栏",
						open: false,
						pages: [] as Page[]
					},{
						id: "scroll-fold-nav2",
						url: "scroll-fold-nav2",
						name: "随滚动折叠的导航栏2",
						open: false,
						pages: [] as Page[]
					}, {
						id: "swiper-list",
						url: "swiper-list",
						name: "swiper-list",
						open: false,
						enable: false,
						pages: [] as Page[]

					}, {
						id: "custom-refresher",
						url: "custom-refresher",
						name: "自定义下拉刷新",
						open: false,
						pages: [] as Page[]
					},
					{
						id: "pull-zoom-image",
						url: "pull-zoom-image",
						name: "下拉缩放顶部封面图",
						open: false,
						enable: false,
						pages: [] as Page[]
					},
					{
						id: "show-search-with-scroll",
						url: "show-search-with-scroll",
						name: "滚动后自动显隐的搜索框",
						open: false,
						enable: false,
						pages: [] as Page[]
					},
					{
						id: "swiper-vertical-video",
						url: "swiper-vertical-video",
						name: "竖滑视频",
						open: false,
						pages: [] as Page[]
					},
					{
						id: "scroll-sticky",
						url: "scroll-sticky",
						name: "吸顶",
						open: false,
						pages: [] as Page[]
					},
					{
						id: "drop-card",
						url: "drop-card",
						name: "划走式卡片",
						open: false,
						pages: [] as Page[]
					},
                    {
                        id: "calendar",
                        url: "calendar",
                        name: "日历",
                        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({
						icon: 'none',
						title: '暂不支持'
					})
					return
				}
				const url = e.url.indexOf('platform') > -1 ? e.url : `/pages/template/${e.url}/${e.url}`
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style>
	@import '../../common/uni-uvue.css';
</style>