chanyiUniapp/pages/tabBar/extUI/extUI.nvue

<template>
	<view class="uni-container">
		<view v-if="!hasLeftWin" class="uni-header-logo">
			<image class="uni-header-image" src="/static/extuiIndex.png"></image>
		</view>
		<view v-if="!hasLeftWin" 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="{'pc-hide': hideList.indexOf(item.url) !== -1  && hasLeftWin}" class="uni-panel" v-for="item in lists" :key="item.url">
			<view :class="{'left-win-active': leftWinActive ===  item.url && hasLeftWin}" 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 {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				hideList: [
					'load-more'
				],
				lists: [{
						name: "uni-badge 数字角标",
						url: "badge"
					},
					{
						name: "uni-calendar 日历",
						url: "calendar"
					},
					{
						name: "uni-card 卡片",
						url: "card"
					},
					{
						name: "uni-collapse 折叠面板",
						url: "collapse"
					},

					// #ifndef APP-NVUE 
					{
						name: "uni-combox 组合框",
						url: "combox"
					},
					// #endif 
					{
						name: "uni-countdown 倒计时",
						url: "countdown"
					},
					{
						name: "uni-data-checkbox 数据选择器",
						url: "data-checkbox"
					},
					{
						name: "uni-data-picker 数据驱动的picker选择器",
						url: "data-picker"
					},
					{
						name: "uni-dateformat 日期格式化",
						url: "dateformat"
					},

					// #ifndef APP-NVUE 
					{
						name: "uni-datetime-picker 日期选择器",
						url: "datetime-picker"
					},
					// #endif 
					{
						name: "uni-drawer 抽屉",
						url: "drawer"
					},
					{
						name: "uni-easyinput 增强输入框",
						url: "easyinput"
					},
					{
						name: "uni-fab 悬浮按钮",
						url: "fab"
					},
					{
						name: "uni-fav 收藏按钮",
						url: "fav"
					},

					// #ifndef APP-NVUE 
					{
						name: "uni-file-picker 文件选择上传",
						url: "file-picker"
					},
					// #endif 
					{
						name: "uni-forms 表单",
						url: "forms"
					},
					{
						name: "uni-goods-nav 商品导航",
						url: "goods-nav"
					},
					{
						name: "uni-grid 宫格",
						url: "grid"
					},
					{
						name: "uni-group 分组",
						url: "group"
					},
					{
						name: "uni-icons 图标",
						url: "icons"
					},
					{
						name: "uni-indexed-list 索引列表",
						url: "indexed-list"
					},
					{
						name: "uni-link 超链接",
						url: "link"
					},
					{
						name: "uni-list 列表",
						url: "list"
					},
					{
						name: "uni-load-more 加载更多",
						url: "load-more"
					},
					{
						name: "uni-nav-bar 自定义导航栏",
						url: "nav-bar"
					},
					{
						name: "uni-notice-bar 通告栏",
						url: "notice-bar"
					},
					{
						name: "uni-number-box 数字输入框",
						url: "number-box"
					},
					{
						name: "uni-pagination 分页器",
						url: "pagination"
					},
					{
						name: "uni-popup 弹出层",
						url: "popup"
					},
					{
						name: "uni-rate 评分",
						url: "rate"
					},
					{
						name: "uni-row 布局-行",
						url: "row"
					},
					{
						name: "uni-search-bar 搜索栏",
						url: "search-bar"
					},

					// #ifndef APP || H5 || MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ 
					{
						name: "section 标题栏",
						url: "section"
					},
					// #endif 
					{
						name: "uni-segmented-control 分段器",
						url: "segmented-control"
					},
					{
						name: "uni-steps 步骤条",
						url: "steps"
					},
					{
						name: "uni-swipe-action 滑动操作",
						url: "swipe-action"
					},
					{
						name: "uni-swiper-dot 轮播图指示点",
						url: "swiper-dot"
					},

					// #ifndef APP-NVUE || MP-TOUTIAO 
					{
						name: "uni-table 表格",
						url: "table"
					},
					// #endif 
					{
						name: "uni-tag 标签",
						url: "tag"
					},
					{
						name: "uni-title 章节标题",
						url: "title"
					},
					{
						name: "uni-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'
			});
		},
		computed: {
			...mapState({
				hasLeftWin: state => !state.noMatchLeftWindow,
				leftWinActive: state => state.leftWinActive.split('/')[3],
				activeOpen: state => state.activeOpen
			})
		},
		// #ifdef H5
		watch: {
			$route: {
				immediate: true,
				handler(newRoute) {
					if (newRoute.matched.length) {
						this.setLeftWinActive(newRoute.path)
					}
				}
			}
		},
		// #endif
		methods: {
			...mapMutations(['setMenu', 'setMatchLeftWindow', 'setLeftWinActive', 'setActiveOpen']),
			goDetailPage(path) {
				const url = '/pages/extUI/' + path + '/' + path
				if (this.hasLeftWin) {
					uni.reLaunch({
						url: url
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

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