dccloud/uni-app-front/pages/tabBar/extUI/extUI.nvue

<template>
	<view class="uni-container">
		<view class="uni-header-logo">
			<image class="uni-header-image" src="/static/extuiIndex.png"></image>
		</view>
		<view class="uni-hello-text">
			<text class="hello-text">以下是uni-app扩展组件示例，更多组件见插件市场：</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 in lists" :key="item.url">
			<view class="uni-panel-h" @click="goDetailPage(item.url)">
				<text class="uni-panel-text">{{item.name}}</text>
				<text class="uni-panel-icon uni-icon">&#xe470;</text>
			</view>
		</view>
	</view>
</template>
<script>
	import uLink from "@/components/uLink.vue"
	export default {
		components: {
			uLink
		},
		data() {
			return {
				navigateFlag: false,
				lists: [{
						name: "Badge 数字角标",
						url: "badge"
					},
					{
						name: "Card 卡片",
						url: "card"
					},
					{
						name: "Collapse 折叠面板",
						url: "collapse"
					},
					{
						name: "Combox 组合框",
						url: "combox"
					},
					{
						name: "Countdown 倒计时",
						url: "countdown"
					},
					{
						name: "Drawer 抽屉",
						url: "drawer"
					},
					{
						name: "Fab 悬浮按钮",
						url: "fab"
					},
					{
						name: "Fav 收藏按钮",
						url: "fav"
					},
					{
						name: "Field 输入框",
						url: "field"
					},
					{
						name: "Forms 表单",
						url: "forms"
					},
					{
						name: "GoodsNav 商品导航",
						url: "goods-nav"
					},
					{
						name: "Grid 宫格",
						url: "grid"
					},
					{
						name: "Group 分组",
						url: "group"
					},
					{
						name: "Icons 图标",
						url: "icons"
					},
					{
						name: "IndexedList 索引列表",
						url: "indexed-list"
					},
					{
						name: "Link 超链接",
						url: "link"
					},
					{
						name: "List 列表",
						url: "list"
					},
					{
						name: "LoadMore 加载更多",
						url: "load-more"
					},
					{
						name: "NavBar 自定义导航栏",
						url: "nav-bar"
					},
					// #ifndef QUICKAPP-WEBVIEW 
					{
						name: "NoticeBar 通告栏",
						url: "notice-bar"
					},
					// #endif 
					{
						name: "NumberBox 数字输入框",
						url: "number-box"
					},
					{
						name: "Pagination 分页器",
						url: "pagination"
					},
					// #ifndef QUICKAPP-WEBVIEW-HUAWEI 
					{
						name: "PopUp 弹出层",
						url: "popup"
					},
					// #endif 
					{
						name: "Rate 评分",
						url: "rate"
					},
					{
						name: "SearchBar 搜索栏",
						url: "search-bar"
					},
					{
						name: "SegmentedControl 分段器",
						url: "segmented-control"
					},
					{
						name: "Steps 步骤条",
						url: "steps"
					},
					{
						name: "SwipeAction 滑动操作",
						url: "swipe-action"
					},
					{
						name: "SwiperDot 轮播图指示点",
						url: "swiper-dot"
					},
					{
						name: "Tag 标签",
						url: "tag"
					},
					{
						name: "Transition 过渡动画",
						url: "transition"
					},
				]
			};
		},
		onLoad() {},
		onReady() {
			// #ifdef APP-NVUE
			uni.preloadPage({
				url: "/pages/extUI/calendar/calendar",
				success() {
					console.log("preloadPage /pages/extUI/calendar/calendar")
				},
				fail() {}
			})
			// #endif
		},
		onShareAppMessage() {
			return {
				title: '欢迎体验uni-app',
				path: '/pages/tabBar/extUI/extUI'
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/about/about'
			});
		},
		methods: {
			goDetailPage(path) {
				if (this.navigateFlag) {
					return;
				}
				this.navigateFlag = true;
				uni.navigateTo({
					url: '/pages/extUI/' + path + '/' + path
				});
				setTimeout(() => {
					this.navigateFlag = false;
				}, 200)
			}
		}
	}
</script>

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