502 行
13 KiB
Plaintext
502 行
13 KiB
Plaintext
<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>
|
||
<uni-link class="hello-text" href="https://ext.dcloud.net.cn"
|
||
<!-- #ifndef MP -->
|
||
target="_blank"
|
||
<!-- #endif -->
|
||
>https://ext.dcloud.net.cn</uni-link>
|
||
</view>
|
||
<uni-collapse>
|
||
<template v-for="(item, index) in list" :key="item.id">
|
||
<uni-collapse-item v-if="item.pages.length > 0" class="uni-panel" :open="item.open" :title="item.name"
|
||
title-wrap-class="component-collapse-title-wrap" title-class="component-collapse-title"
|
||
content-wrap-class="component-collapse-content-wrap" arrow-class="component-collapse-arrow"
|
||
@change="syncCollapseState(index, $event as boolean)">
|
||
<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 === getPageKey(page.url) && hasLeftWin,'text-disabled' : page.enable == false}">{{ page.name }}</text>
|
||
<view class="right_arrow"></view>
|
||
</view>
|
||
</uni-collapse-item>
|
||
<view v-else class="uni-panel">
|
||
<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>
|
||
<view class="right_arrow"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</uni-collapse>
|
||
</view>
|
||
<!-- #ifdef APP -->
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
// #ifdef VUE3-VAPOR && APP || WEB
|
||
import { generateMockList as generateListViewMockList } from '../template/long-list-perf/mock-data'
|
||
import { generateMockList as generateWaterflowMockList } from '../template/waterflow-perf/mock-data'
|
||
// #endif
|
||
defineOptions({
|
||
styleIsolation: 'app'
|
||
})
|
||
|
||
const activeIndex = inject<Ref<number>>('tabBarCurrentIndex', ref(0))
|
||
|
||
const instance = getCurrentInstance()?.proxy
|
||
|
||
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'
|
||
|
||
const list = ref<ListItem[]>([
|
||
// #ifdef APP && VUE3-VAPOR
|
||
{
|
||
id: '4050',
|
||
url: '4050',
|
||
name: 'view和text性能测试',
|
||
open: false,
|
||
pages: [
|
||
{
|
||
name: '拍平示例',
|
||
url: '4050/4050'
|
||
},
|
||
{
|
||
name: '非拍平示例',
|
||
url: '4050/4050-no-flatten'
|
||
}
|
||
] as Page[],
|
||
},
|
||
{
|
||
id: '2000-image',
|
||
url: '2000-image',
|
||
name: 'image性能测试',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'long-rich-text',
|
||
url: 'long-rich-text',
|
||
name: 'rich-text 5万字性能测试',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'long-list-perf',
|
||
url: 'long-list-perf',
|
||
name: '死亡长列表',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'waterflow-perf',
|
||
url: 'waterflow-perf',
|
||
name: 'waterflow滚动加载长列表',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
{
|
||
id: 'long-list',
|
||
url: 'long-list',
|
||
name: '左右滑动长列表',
|
||
open: false,
|
||
enable: true,
|
||
pages: [
|
||
// #ifdef WEB
|
||
{
|
||
name: '顶部 Banner 分栏信息流嵌套滚动',
|
||
url: 'banner-tabs-feed-nested-scroll'
|
||
},
|
||
// #endif
|
||
// #ifdef APP
|
||
{
|
||
name: '顶部 Banner 分栏长列表嵌套滚动',
|
||
url: 'banner-tabs-long-list-nested-scroll'
|
||
},
|
||
{
|
||
name: '顶部 Banner 瀑布流嵌套滚动',
|
||
url: 'banner-waterfall-nested-scroll'
|
||
},
|
||
// #endif
|
||
{
|
||
name: '带搜索框的分栏长列表',
|
||
url: 'search-header-long-list'
|
||
}
|
||
] as Page[],
|
||
},
|
||
{
|
||
id: 'news-feed-list',
|
||
url: 'news-feed-list',
|
||
name: '新闻资讯列表',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #ifdef APP || WEB
|
||
{
|
||
id: 'list-delete-swipe-batch',
|
||
url: 'list-delete-swipe-batch',
|
||
name: '可侧滑删除和多选删除的列表',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
// #ifndef VUE3-VAPOR
|
||
{
|
||
id: 'batch-load-long-list',
|
||
url: 'batch-load-long-list',
|
||
name: '分批加载长列表',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'recycle-long-list',
|
||
url: 'recycle-long-list',
|
||
name: '可回收复用长列表',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
{
|
||
id: 'swipe-tabs-underline',
|
||
url: 'swipe-tabs-underline',
|
||
name: '横滑分页标签栏',
|
||
open: false,
|
||
pages: [
|
||
{
|
||
name: '横滑分页标签栏（下划线指示）',
|
||
url: 'swipe-tabs-underline'
|
||
},
|
||
{
|
||
name: '横滑分页标签栏（字体缩放高亮）',
|
||
url: 'swipe-tabs-scale-highlight'
|
||
},
|
||
] as Page[],
|
||
},
|
||
{
|
||
id: 'scroll-collapse-navbar',
|
||
url: 'scroll-collapse-navbar',
|
||
name: '随滚动折叠的导航栏',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #ifdef APP
|
||
{
|
||
id: 'pull-zoom-profile-page',
|
||
url: 'pull-zoom-profile-page',
|
||
name: '下拉缩放封面图的个人主页',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'scroll-view-sticky-section',
|
||
url: 'scroll-view-sticky-section',
|
||
name: '自定义吸顶',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
{
|
||
id: 'keyboard-adjust',
|
||
url: 'keyboard-adjust',
|
||
name: '输入框上推示例',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'scroll-fade-navbar',
|
||
url: 'scroll-fade-navbar',
|
||
name: '随滚动渐显的透明导航栏',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'vertical-video-feed',
|
||
url: 'vertical-video-feed',
|
||
name: '竖滑切换的视频信息流',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #ifndef MP
|
||
{
|
||
id: 'chat-stream-reply',
|
||
url: 'chat-stream-reply',
|
||
name: '流式回复聊天示例',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
{
|
||
id: 'draggable-half-modal',
|
||
url: 'draggable-half-modal',
|
||
name: '可拖拽关闭的半屏弹窗',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'interstitial-poster',
|
||
url: 'interstitial-poster',
|
||
name: 'page-container 插屏海报',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'swipe-card-stack',
|
||
url: 'swipe-card-stack',
|
||
name: '左右划走的卡片堆叠',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'shopping-cart-animation',
|
||
url: 'shopping-cart-animation',
|
||
name: '购物车加购动画',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #ifdef APP && !VUE3-VAPOR
|
||
{
|
||
id: 'calendar',
|
||
url: 'calendar',
|
||
name: '日历',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
// #ifdef MP || VUE3-VAPOR
|
||
{
|
||
id: 'calendar',
|
||
url: 'calendar-vapor',
|
||
name: '日历',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
// #ifdef APP || WEB
|
||
{
|
||
id: 'external-link-launch',
|
||
url: 'external-link-launch',
|
||
name: '唤起外部应用与链接',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
// #ifdef WEB
|
||
{
|
||
id: 'browser-built-in-elements',
|
||
url: 'browser-built-in-elements',
|
||
name: '浏览器内置元素示例',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
{
|
||
id: 'mp-custom-components-vant',
|
||
url: 'mp-custom-components-vant',
|
||
name: '微信小程序自定义组件接入（Vant）',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
{
|
||
id: 'wxs-drag-interaction',
|
||
url: 'wxs-drag-interaction',
|
||
name: 'WXS 交互与拖拽示例',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
},
|
||
// #endif
|
||
{
|
||
id: 'about',
|
||
url: 'about',
|
||
name: '关于',
|
||
open: false,
|
||
pages: [] as Page[],
|
||
}
|
||
] as ListItem[])
|
||
const hasLeftWin = computed(() : boolean => {
|
||
return !state.noMatchLeftWindow
|
||
})
|
||
const leftWinActive = computed(() : string => {
|
||
return state.leftWinActive.split('/')[3]
|
||
})
|
||
const isDarkMode = computed(() : boolean => {
|
||
return state.isDarkMode
|
||
})
|
||
const netless = computed(() : boolean => {
|
||
return state.netless
|
||
})
|
||
|
||
function getPageKey(url : string) : string {
|
||
if (url.indexOf('/pages/') == 0) {
|
||
const parts = url.split('/')
|
||
if (parts.length > 1) {
|
||
return parts[parts.length - 2]
|
||
}
|
||
}
|
||
return url
|
||
}
|
||
|
||
function resolvePageUrl(url : string) : string {
|
||
if (url.indexOf('platform') > -1 || url.indexOf('/pages/') == 0) {
|
||
return url
|
||
}
|
||
if (url.indexOf('/') > -1) {
|
||
return `/pages/template/${url}`
|
||
}
|
||
return `/pages/template/${url}/${url}`
|
||
}
|
||
|
||
function goDetailPage(e : Page) {
|
||
if (e.enable == false) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '暂不支持',
|
||
})
|
||
return
|
||
}
|
||
const url = resolvePageUrl(e.url)
|
||
if (hasLeftWin.value) {
|
||
uni.reLaunch({ url })
|
||
} else {
|
||
uni.navigateTo({ url
|
||
,fail() {
|
||
console.log('页面跳转失败：' + url)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
function triggerCollapse(index : number, item : ListItem) {
|
||
if (item.pages.length == 0) {
|
||
const page : Page = {
|
||
name: item.name,
|
||
enable: item.enable,
|
||
url: item.url!,
|
||
}
|
||
goDetailPage(page)
|
||
return
|
||
}
|
||
for (var i = 0; i < list.value.length; ++i) {
|
||
if (index == i) {
|
||
list.value[i].open = !list.value[i].open
|
||
} else {
|
||
list.value[i].open = false
|
||
}
|
||
}
|
||
}
|
||
|
||
function syncCollapseState(index : number, open : boolean) {
|
||
for (var i = 0; i < list.value.length; ++i) {
|
||
list.value[i].open = open && index == i
|
||
}
|
||
}
|
||
|
||
// #ifdef APP-HARMONY
|
||
watch(() => netless.value, (netless) => {
|
||
if (netless) {
|
||
list.value = list.value.filter(item => {
|
||
return !['news-feed-list'].includes(item.id)
|
||
})
|
||
}
|
||
}, { immediate: true })
|
||
// #endif
|
||
|
||
// #ifdef WEB
|
||
watch(() => (instance as any)?.$route, (newRoute) => {
|
||
if (newRoute && newRoute.matched.length) {
|
||
let path = newRoute.path.split('/')[3]
|
||
for (const item of list.value) {
|
||
if (Array.isArray(item.pages)) {
|
||
for (const page of item.pages) {
|
||
if (page.url && getPageKey(page.url) === path) {
|
||
item.open = true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}, { immediate: true })
|
||
// #endif
|
||
|
||
onMounted(() => {
|
||
// #ifdef VUE3-VAPOR && APP || WEB
|
||
// 预加载长列表数据
|
||
generateListViewMockList()
|
||
generateWaterflowMockList()
|
||
// #endif
|
||
// 预热网络，只发送head请求，预先完成dns解析和tcp握手，提升后续请求速度
|
||
uni.request({
|
||
url: 'https://unidemo.dcloud.net.cn', // 替换为实际请求的URL
|
||
method: 'HEAD',
|
||
success: (res) => {
|
||
// console.log('预热网络成功', res)
|
||
},
|
||
fail: (err) => {
|
||
// console.log('预热网络失败', err);
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
.uni-panel-h {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 12px 18px;
|
||
}
|
||
|
||
.right_arrow {
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-left: 12px;
|
||
transform: rotate(-45deg);
|
||
border-right-width: 1px;
|
||
border-right-style: solid;
|
||
border-right-color: var(--arrow-color, #999999);
|
||
border-bottom-width: 1px;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: var(--arrow-color, #999999);
|
||
}
|
||
|
||
.component-collapse-title-wrap {
|
||
background-color: var(--list-background-color, #ffffff);
|
||
}
|
||
|
||
.component-collapse-title {
|
||
color: var(--text-color, #333333);
|
||
}
|
||
|
||
.component-collapse-content-wrap {
|
||
background-color: var(--list-background-color, #ffffff);
|
||
}
|
||
|
||
.component-collapse-arrow {
|
||
border-right-color: var(--arrow-color, #999999);
|
||
border-bottom-color: var(--arrow-color, #999999);
|
||
}
|
||
</style>
|