<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;" enable-back-to-top="true">
<!-- #endif -->
<view class="uni-container" :class="isDarkMode ? 'theme-dark' : 'theme-light'">
<view v-if="!hasLeftWin" class="uni-header-logo">
<image class="uni-header-image" src="/static/templateIndex.png"></image>
</view>
<view v-if="!hasLeftWin" class="uni-text-box">
<text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
<u-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 hover-class="is--active" class="uni-panel-h" @click="triggerCollapse(index, item)">
<text class="uni-panel-text"
:class="item.enable == false || item.open == true ? 'text-disabled' : '',item.url == leftWinActive && item.pages.length == 0 ? 'left-win-active' : ''">{{ item.name }}</text>
<image :src="
item.pages.length > 0
? item.open
? arrowUpIcon
: arrowDownIcon
: arrowRightIcon
" class="uni-icon-size">
</image>
</view>
<view v-if="item.open">
<view style="padding-left: 18px;" 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="{'left-win-active': leftWinActive === page.url && hasLeftWin,'text-disabled' : page.enable == false}">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
type Page = {
name : string
enable ?: boolean
url : string
}
type ListItem = {
id : string
name : string
open : boolean
pages : Page[]
url ?: string
enable ?: boolean
}
import { state } from '@/store/index.uts'
export default {
data() {
return {
list: [
{
id: 'slider-100',
url: 'slider-100',
name: 'slider-100',
open: false,
pages: [] as Page[],
},
{
id: 'long-list',
url: 'long-list',
name: '左右滑动长列表',
open: false,
enable: true,
pages: [
// #ifdef WEB
{
name: '顶部banner长列表（嵌套滚动）',
url: 'long-list2'
},
// #endif
// #ifdef APP
{
name: '顶部banner长列表（嵌套滚动）',
url: 'long-list-nested'
},
// #endif
// #ifdef APP-IOS || APP-ANDROID
{
name: '顶部banner瀑布流长列表（嵌套滚动）',
url: 'long-waterflow-nested'
},
// #endif
{
name: '顶部搜索框随时下移长列表',
url: 'long-list'
}
] as Page[],
},
{
id: 'list-news',
url: 'list-news',
name: '列表到详情（吸顶）',
open: false,
pages: [] as Page[],
},
{
id: 'long-list-batch',
url: 'long-list-batch',
name: '分批加载长列表',
open: false,
pages: [] as Page[],
},
{
id: 'custom-long-list',
url: 'custom-long-list',
name: '回收复用长列表',
open: false,
pages: [] as Page[],
},
{
id: 'swiper-list',
url: 'swiper-list',
name: 'swiper-list',
open: false,
pages: [
{
name: '下划线样式',
url: 'swiper-list'
},
{
name: '字体放大样式',
url: 'swiper-list2'
},
] as Page[],
},
{
id: 'scroll-fold-nav',
url: 'scroll-fold-nav',
name: '随滚动折叠的导航栏',
open: false,
pages: [] as Page[],
},
// #ifdef APP
{
id: 'custom-refresher',
url: 'custom-refresher',
name: '自定义下拉刷新',
open: false,
pages: [] as Page[],
},
{
id: 'pull-zoom-image',
url: 'pull-zoom-image',
name: '下拉缩放顶部封面图',
open: false,
pages: [] as Page[],
},
{
id: 'scroll-sticky',
url: 'scroll-sticky',
name: 'scroll-view自定义滚动吸顶',
open: false,
pages: [] as Page[],
},
// #endif
{
id: 'swiper-vertical-video',
url: 'swiper-vertical-video',
name: '竖滑视频',
open: false,
pages: [] as Page[],
},
{
id: 'half-screen',
url: 'half-screen',
name: '半屏弹窗',
open: false,
pages: [] as Page[],
},
{
id: 'drop-card',
url: 'drop-card',
name: '划走式卡片',
open: false,
pages: [] as Page[],
},
{
id: 'navbar-lite',
url: 'navbar-lite',
name: '自定义导航栏',
open: false,
pages: [] as Page[],
},
{
id: 'nav-transparent',
url: 'nav-transparent',
name: '自定义透明渐变导航栏',
open: false,
pages: [] as Page[],
},
{
id: 'custom-tab-bar',
url: 'custom-tab-bar',
name: '自定义TabBar',
open: false,
enable: true,
pages: [] as Page[],
},
// #ifdef APP
{
id: 'calendar',
url: 'calendar',
name: '日历',
open: false,
pages: [] as Page[],
},
// #endif
// #ifdef APP || WEB
{
id: 'schema',
url: 'schema',
name: '打开外部链接',
open: false,
pages: [] as Page[],
},
// #endif
// #ifdef WEB
{
id: 'browser-element',
url: 'browser-element',
name: '如何使用浏览器 element',
open: false,
pages: [] as Page[],
},
// #endif
// #ifdef MP
{
id: 'vant',
url: 'vant',
name: '微信自定义组件示例',
open: false,
pages: [] as Page[],
},
{
id: 'WXS',
url: 'WXS',
name: 'WXS',
open: false,
pages: [] as Page[],
},
// #endif
{
id: 'about',
url: 'about',
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'
}
},
computed: {
hasLeftWin() : boolean {
return !state.noMatchLeftWindow
},
leftWinActive() : string {
return state.leftWinActive.split('/')[3]
},
isDarkMode() : boolean {
return state.isDarkMode
},
netless() : boolean {
return state.netless
}
},
// #ifdef APP-HARMONY
watch: {
'netless': {
immediate: true,
handler(netless) {
if (netless) {
this.list = this.list.filter(item => {
return !['list-news'].includes(item.id)
})
}
}
}
},
// #endif
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}`
if (this.hasLeftWin) {
uni.reLaunch({ url })
} else {
uni.navigateTo({ url })
}
}
},
// #ifdef WEB
watch: {
$route: {
immediate: true,
handler(newRoute) {
if (newRoute.matched.length) {
let path = newRoute.path.split('/')[3]
for (const item of this.list) {
if (Array.isArray(item.pages)) {
for (const page of item.pages) {
if (page.url && page.url === path) {
item.open = true
}
}
}
}
}
}
}
},
// #endif
}
</script>
<style>
.uni-panel-h {
padding: 12px 18px;
}
</style>
