tijiao
This commit is contained in:
@@ -1,266 +1,278 @@
|
||||
<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"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
hasLeftWin: {
|
||||
type: Boolean
|
||||
},
|
||||
leftWinActive: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hideList: [
|
||||
'load-more'
|
||||
],
|
||||
lists: [{
|
||||
name: "uni-badge 数字角标",
|
||||
url: "badge"
|
||||
},
|
||||
{
|
||||
name: "uni-breadcrumb 面包屑",
|
||||
url: "breadcrumb"
|
||||
},
|
||||
{
|
||||
name: "uni-calendar 日历",
|
||||
url: "calendar"
|
||||
},
|
||||
{
|
||||
name: "uni-card 卡片",
|
||||
url: "card"
|
||||
},
|
||||
{
|
||||
name: "uni-collapse 折叠面板",
|
||||
url: "collapse"
|
||||
},
|
||||
export default {
|
||||
props: {
|
||||
hasLeftWin: {
|
||||
type: Boolean,
|
||||
},
|
||||
leftWinActive: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hideList: ["load-more"],
|
||||
lists: [
|
||||
{
|
||||
name: "uni-badge 数字角标",
|
||||
url: "badge",
|
||||
},
|
||||
{
|
||||
name: "uni-breadcrumb 面包屑",
|
||||
url: "breadcrumb",
|
||||
},
|
||||
{
|
||||
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-data-select 数据驱动的下拉框",
|
||||
url: "data-select"
|
||||
},
|
||||
{
|
||||
name: "uni-dateformat 日期格式化",
|
||||
url: "dateformat"
|
||||
},
|
||||
{
|
||||
name: "uni-datetime-picker 日期选择器",
|
||||
url: "datetime-picker"
|
||||
},
|
||||
{
|
||||
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"
|
||||
},
|
||||
// #ifndef MP-JD
|
||||
{
|
||||
name: "uni-load-more 加载更多",
|
||||
url: "load-more"
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
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"
|
||||
},
|
||||
{
|
||||
name: "uni-section 标题栏",
|
||||
url: "section"
|
||||
},
|
||||
{
|
||||
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 || MP-BAIDU
|
||||
{
|
||||
name: "uni-table 表格",
|
||||
url: "table"
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: "uni-tag 标签",
|
||||
url: "tag"
|
||||
},
|
||||
{
|
||||
name: "uni-title 章节标题",
|
||||
url: "title"
|
||||
},
|
||||
{
|
||||
name: "uni-tooltip 文字提示",
|
||||
url: "tooltip"
|
||||
},
|
||||
{
|
||||
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'
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goDetailPage(path) {
|
||||
const url = '/pages/extUI/' + path + '/' + path
|
||||
if (this.hasLeftWin) {
|
||||
uni.reLaunch({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// #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-data-select 数据驱动的下拉框",
|
||||
url: "data-select",
|
||||
},
|
||||
{
|
||||
name: "uni-dateformat 日期格式化",
|
||||
url: "dateformat",
|
||||
},
|
||||
{
|
||||
name: "uni-datetime-picker 日期选择器",
|
||||
url: "datetime-picker",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
// #ifndef MP-JD
|
||||
{
|
||||
name: "uni-load-more 加载更多",
|
||||
url: "load-more",
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
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",
|
||||
},
|
||||
{
|
||||
name: "uni-section 标题栏",
|
||||
url: "section",
|
||||
},
|
||||
{
|
||||
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 || MP-BAIDU
|
||||
{
|
||||
name: "uni-table 表格",
|
||||
url: "table",
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: "uni-tag 标签",
|
||||
url: "tag",
|
||||
},
|
||||
{
|
||||
name: "uni-title 章节标题",
|
||||
url: "title",
|
||||
},
|
||||
{
|
||||
name: "uni-tooltip 文字提示",
|
||||
url: "tooltip",
|
||||
},
|
||||
{
|
||||
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",
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
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';
|
||||
@import "../../../common/uni-nvue.css";
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user