Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 e8674538 编写于 作者: M mehaotian
浏览文件
操作

feat: 新增折叠面板效果

上级 ff31beac
隐藏空白更改
内联 并排
Showing with 1365 addition and 1175 deletion
common/uni-uvue.css
浏览文件 @ e8674538
...@@ -124,7 +124,9 @@ ...@@ -124,7 +124,9 @@
.uni-navigate-item:active { .uni-navigate-item:active {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
.is--active {
background-color: #f8f8f8;
}
.uni-navigate-text { .uni-navigate-text {
color: #000000; color: #000000;
font-size: 14px; font-size: 14px;
......
components/uni-collapse-item/uni-collapse-item.vue 0 → 100644
浏览文件 @ e8674538
<template>
<view class="uni-collapse-item">
<view class="uni-collapse-item__title" :class="{'open--active':is_open}" @click="openCollapse(!this.is_open)">
<text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled}">{{title}}</text>
<view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
</view>
<view ref="boxRef" class="uni-collapse-item__content">
<view ref="contentRef" class="uni-collapse-item__content-box">
<slot></slot>
</view>
</view>
</view>
</template>
<script>
import { $dispatch } from './util.uts'
export default {
name: "UniCollapseItem",
props: {
// 列表标题
title: {
type: String,
default: ''
},
open: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
height: 0,
is_open: this.open as boolean,
boxNode: null as INode | null,
contentNode: null as INode | null,
};
},
watch: {
open(value: boolean) {
// this.is_open = value
if (this.boxNode != null) {
this.openCollapse(value)
}
}
},
created() {
$dispatch(this, 'UniCollapse', 'init', this)
},
mounted() {
this.boxNode = this.$refs['boxRef'] as INode;
this.contentNode = this.$refs['contentRef'] as INode;
// this.openCollapse(this.open)
},
methods: {
// 开启或关闭折叠面板
openCollapse(open: boolean) {
if (this.disabled) return
// 关闭其他已打开
$dispatch(this, 'UniCollapse', 'cloceAll')
this.is_open = open
this.oepnOrClose(open)
},
oepnOrClose(open: boolean) {
const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none';
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide);
this.$nextTick(() => {
contentNode.setProperty('transform', ani_transform);
})
}
}
}
</script>
<style scoped>
.uni-collapse-item {
background-color: #fff;
}
.uni-collapse-item__title {
flex-direction: row;
align-items: center;
line-height: 22px;
padding: 12px;
background-color: #fff;
}
.open--active {
background-color: #f0f0f0;
}
.down_arrow {
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px #999 solid;
border-bottom: 1px #999 solid;
margin-top: -3px;
transition-property: transform;
transition-duration: 0.2s;
}
.down_arrow--active {
transform: rotate(-135deg);
margin-top: 0px;
}
.uni-collapse-item__title-text {
flex: 1;
color: #000;
font-size: 14px;
font-weight: 400;
}
.is-disabled {
color: #999;
}
.uni-collapse-item__content {
display: none;
position: relative;
}
.uni-collapse-item__content-box {
width: 100%;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(-100%);
}
</style>
\ No newline at end of file
components/uni-collapse-item/util.uts 0 → 100644
浏览文件 @ e8674538
// import { ComponentPublicInstance } from 'vue'
// 查找父组件实例
export function $dispatch(
context : ComponentPublicInstance,
componentName : string,
eventName : string,
...params : any | null
) {
let parent = context.$parent
let name = parent?.$options?.name
while (parent != null && (name == null || componentName != name)) {
parent = parent.$parent
if (parent != null) {
name = parent?.$options?.name
}
}
if (parent != null) {
parent.$callMethod(eventName, ...params)
}
}
\ No newline at end of file
components/uni-collapse/uni-collapse.vue 0 → 100644
浏览文件 @ e8674538
<template>
<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
<view>
<slot></slot>
</view>
</template>
<script>
// import { ComponentPublicInstance } from 'vue'
export default {
name: "UniCollapse",
props: {
// 是否开启手风琴效果
accordion: {
type: Boolean,
default: true
}
},
data() {
return {
child_nodes: [] as Array < ComponentPublicInstance >
};
},
methods: {
init(child: ComponentPublicInstance) {
this.child_nodes.push(child)
},
// 关闭所有
cloceAll() {
// 开启手风琴效果才回关闭其他
if (this.accordion && this.child_nodes.length > 0) {
this.child_nodes.forEach((item) => {
const is_open = item.$data.get('is_open') as boolean
// TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
if (is_open) {
item.$data.set('is_open', false)
item.$callMethod('oepnOrClose', false)
}
})
}
}
}
}
</script>
<style>
</style>
\ No newline at end of file
pages/tabBar/API.uvue
浏览文件 @ e8674538
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view class="uni-container"> <view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image class="uni-header-image" src="/static/apiIndex.png"></image> <image class="uni-header-image" src="/static/apiIndex.png"></image>
</view> </view>
<view class="uni-hello-text"> <view class="uni-hello-text">
<text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text> <text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
<u-link <u-link :href="'https://uniapp.dcloud.io/api/'" :text="'https://uniapp.dcloud.io/api/'" :inWhiteList="true"></u-link>
:href="'https://uniapp.dcloud.io/api/'" </view>
:text="'https://uniapp.dcloud.io/api/'"
:inWhiteList="true" <uni-collapse>
></u-link> <template v-for="item in list" :key="item.id">
</view> <uni-collapse-item :title="item.name" class="item">
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> <view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<view <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
class="uni-panel-h" <image :src="arrowRightIcon" class="uni-icon"></image>
:class="item.open ? 'uni-panel-h-on' : ''" </view>
@click="triggerCollapse(index, item)" </uni-collapse-item>
> </template>
<text </uni-collapse>
class="uni-panel-text"
:class="item.enable == false ? 'text-disabled' : ''" <!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
>{{ item.name }}</text <view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
> <text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
<image <image :src="
:src=" item.pages.length >
item.pages.length > 0
? item.open ? item.open
? arrowUpIcon ? arrowUpIcon
: arrowDownIcon : arrowDownIcon
: arrowRightIcon : arrowRightIcon
" " class="uni-icon"></image>
class="uni-icon" </view>
></image> <view class="uni-panel-c" v-if="item.open">
</view> <view class="uni-navigate-item" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<view class="uni-panel-c" v-if="item.open"> <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<view <image :src="arrowRightIcon" class="uni-icon"></image>
class="uni-navigate-item" </view>
v-for="(page, key) in item.pages" </view>
:key="key" </view> -->
@click="goDetailPage(page)" </view>
> <!-- #ifdef APP -->
<text </scroll-view>
class="uni-navigate-text" <!-- #endif -->
:class="page.enable == false ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template> </template>
<script lang="ts"> <script lang="ts">
type Page = { type Page = {
name: string name : string
enable?: boolean enable ?: boolean
url: string url : string
} }
type ListItem = { type ListItem = {
id: string id : string
name: string name : string
open: boolean open : boolean
pages: Page[] pages : Page[]
url?: string url ?: string
enable?: boolean enable ?: boolean
} }
export default { export default {
data() { data() {
return { return {
list: [ list: [
{ {
id: 'base', id: 'base',
name: '基础', name: '基础',
open: false, open: false,
pages: [ pages: [
{ {
name: 'getApp', name: 'getApp',
url: 'get-app', url: 'get-app',
}, },
{ {
name: 'getCurrentPages', name: 'getCurrentPages',
url: 'get-current-pages', url: 'get-current-pages',
}, },
{ {
name: '事件总线event-bus', name: '事件总线event-bus',
url: 'event-bus', url: 'event-bus',
}, },
{ {
name: '获取启动参数', name: '获取启动参数',
url: 'get-launch-options-sync', url: 'get-launch-options-sync',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'page', id: 'page',
name: '页面', name: '页面',
open: false, open: false,
pages: [ pages: [
{ {
name: '页面跳转', name: '页面跳转',
url: 'navigator', url: 'navigator',
}, },
{ {
name: '页面栈管理', name: '页面栈管理',
url: 'getCurrentPages', url: 'getCurrentPages',
enable: false, enable: false,
}, },
{ {
name: '设置导航条标题', name: '设置导航条标题',
url: 'set-navigation-bar-title', url: 'set-navigation-bar-title',
enable: false, enable: false,
}, },
{ {
name: '设置导航条颜色', name: '设置导航条颜色',
url: 'set-navigation-bar-color', url: 'set-navigation-bar-color',
}, },
{ {
name: '设置TabBar', name: '设置TabBar',
url: 'set-tabbar', url: 'set-tabbar',
enable: false, enable: false,
}, },
{ {
name: '下拉刷新', name: '下拉刷新',
url: 'pull-down-refresh', url: 'pull-down-refresh',
// enable: false, enable: false,
}, },
{ {
name: '将页面滚动到指定位置', name: '将页面滚动到指定位置',
url: 'page-scroll-to', url: 'page-scroll-to',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'ui', id: 'ui',
name: '界面', name: '界面',
open: false, open: false,
pages: [ pages: [
/* { /* {
name: "创建动画", name: "创建动画",
url: "animation", url: "animation",
enable: false enable: false
}, },
{ {
name: "创建绘画", name: "创建绘画",
url: "canvas", url: "canvas",
enable: false enable: false
}, },
{ {
name: "节点布局交互状态", name: "节点布局交互状态",
url: "intersection-observer", url: "intersection-observer",
enable: false enable: false
}, */ }, */
{ {
name: '节点信息', name: '节点信息',
url: 'nodes-info', url: 'nodes-info',
}, },
{ {
name: '显示操作菜单', name: '显示操作菜单',
url: 'action-sheet', url: 'action-sheet',
}, },
{ {
name: '显示模态弹窗', name: '显示模态弹窗',
url: 'modal', url: 'modal',
}, },
{ {
name: '显示加载提示框', name: '显示加载提示框',
url: 'show-loading', url: 'show-loading',
}, },
{ {
name: '显示消息提示框', name: '显示消息提示框',
url: 'toast', url: 'toast',
}, },
{ {
name: '动态加载字体', name: '动态加载字体',
url: 'load-font-face', url: 'load-font-face',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'device', id: 'device',
name: '设备', name: '设备',
open: false, open: false,
pages: [ pages: [
{ {
name: '获取设备网络状态', name: '获取设备网络状态',
url: 'get-network-type', url: 'get-network-type',
}, },
{ {
name: '获取系统信息', name: '获取系统信息',
url: 'get-system-info', url: 'get-system-info',
}, },
{ {
name: '获取设备信息', name: '获取设备信息',
url: 'get-device-info', url: 'get-device-info',
}, },
{ {
name: '获取APP基础信息', name: '获取APP基础信息',
url: 'get-app-base-info', url: 'get-app-base-info',
}, },
{ {
name: '获取系统设置', name: '获取系统设置',
url: 'get-system-setting', url: 'get-system-setting',
}, },
{ {
name: '获取APP授权设置', name: '获取APP授权设置',
url: 'get-app-authorize-setting', url: 'get-app-authorize-setting',
}, },
{ {
name: '获取窗口信息', name: '获取窗口信息',
url: 'get-window-info', url: 'get-window-info',
}, },
{ {
name: '电量', name: '电量',
url: 'get-battery-info', url: 'get-battery-info',
}, },
/* { /* {
name: "打电话", name: "打电话",
url: "make-phone-call", url: "make-phone-call",
}, },
{ {
name: "震动", name: "震动",
url: "vibrate", url: "vibrate",
}, },
{ {
name: "添加手机联系人", name: "添加手机联系人",
url: "add-phone-contact", url: "add-phone-contact",
}, },
{ {
name: "扫码", name: "扫码",
url: "scan-code", url: "scan-code",
}, },
{ {
name: "剪贴板", name: "剪贴板",
url: "clipboard", url: "clipboard",
}, },
{ {
name: "屏幕亮度", name: "屏幕亮度",
url: "brightness", url: "brightness",
}, },
{ {
name: "蓝牙", name: "蓝牙",
url: "bluetooth", url: "bluetooth",
}, },
{ {
name: "生物认证", name: "生物认证",
url: "soter", url: "soter",
}, },
{ {
name: "iBeacon", name: "iBeacon",
url: "ibeacon", url: "ibeacon",
}, },
{ {
name: "监听加速度传感器", name: "监听加速度传感器",
url: "on-accelerometer-change", url: "on-accelerometer-change",
}, },
{ {
name: "监听罗盘数据", name: "监听罗盘数据",
url: "on-compass-change", url: "on-compass-change",
}, },
{ {
name: "监听距离传感器", name: "监听距离传感器",
url: "/platforms/app-plus/proximity/proximity", url: "/platforms/app-plus/proximity/proximity",
}, },
{ {
name: "监听方向传感器", name: "监听方向传感器",
url: "/platforms/app-plus/orientation/orientation", url: "/platforms/app-plus/orientation/orientation",
}, */ }, */
] as Page[], ] as Page[],
}, },
{ {
id: 'network', id: 'network',
name: '网络', name: '网络',
open: false, open: false,
pages: [ pages: [
{ {
name: '发起一个请求', name: '发起一个请求',
url: 'request', url: 'request',
}, },
{ {
name: '上传文件', name: '上传文件',
url: 'upload-file', url: 'upload-file',
}, },
{ {
name: '下载文件', name: '下载文件',
url: 'download-file', url: 'download-file',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'websocket', id: 'websocket',
name: 'websocket', name: 'websocket',
open: false, open: false,
pages: [ pages: [
{ {
name: 'socketTask', name: 'socketTask',
url: 'websocket-socketTask', url: 'websocket-socketTask',
}, },
{ {
name: '全局websocket', name: '全局websocket',
url: 'websocket-global', url: 'websocket-global',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'media', id: 'media',
name: '媒体', name: '媒体',
open: false, open: false,
pages: [ pages: [
{ {
name: '图片选择和预览', name: '图片选择和预览',
url: 'preview-image', url: 'preview-image',
}, },
/* { /* {
name: "图片选择和拍照", name: "图片选择和拍照",
url: "image", url: "image",
enable: false enable: false
},{ },{
name: "音频", name: "音频",
url: "inner-audio", url: "inner-audio",
}, },
{ {
name: "录音", name: "录音",
url: "voice", url: "voice",
}, },
{ {
name: "背景音频", name: "背景音频",
url: "background-audio", url: "background-audio",
}, },
{ {
name: "视频选择和拍照", name: "视频选择和拍照",
url: "video", url: "video",
enable: false enable: false
}, },
{ {
name: "文件", name: "文件",
url: "file", url: "file",
}, },
{ {
name: "保存媒体到本地", name: "保存媒体到本地",
url: "save-media", url: "save-media",
}, */ }, */
] as Page[], ] as Page[],
}, },
{ {
id: 'location', id: 'location',
name: '位置', name: '位置',
open: false, open: false,
pages: [ pages: [
{ {
name: '获取当前位置', name: '获取当前位置',
url: 'get-location', url: 'get-location',
}, },
/* { /* {
name: "使用地图查看位置", name: "使用地图查看位置",
url: "open-location", url: "open-location",
}, },
{ {
name: "使用地图选择位置", name: "使用地图选择位置",
url: "choose-location", url: "choose-location",
}, },
{ {
name: "地图控制", name: "地图控制",
url: "map", url: "map",
}, },
{ {
name: "地图搜索", name: "地图搜索",
url: "map-search", url: "map-search",
}, */ }, */
] as Page[], ] as Page[],
}, },
{ {
id: 'storage', id: 'storage',
name: '存储', name: '存储',
open: false, open: false,
pages: [ pages: [
{ {
name: 'storage（key-value存储）', name: 'storage（key-value存储）',
url: 'storage', url: 'storage',
}, },
] as Page[], ] as Page[],
}, },
/* { /* {
id: "rewarded-video-ad", id: "rewarded-video-ad",
url: "rewarded-video-ad", url: "rewarded-video-ad",
name: "激励视频广告", name: "激励视频广告",
open: false, open: false,
enable: false, enable: false,
pages: [] as Page[] pages: [] as Page[]
}, },
{ {
id: "full-screen-video-ad", id: "full-screen-video-ad",
url: "full-screen-video-ad", url: "full-screen-video-ad",
name: "全屏视频广告", name: "全屏视频广告",
open: false, open: false,
enable: false, enable: false,
pages: [] as Page[] pages: [] as Page[]
}, },
{ {
id: "login", id: "login",
name: "登录", name: "登录",
open: false, open: false,
pages: [ pages: [
{ {
name: "登录", name: "登录",
url: "login", url: "login",
}, },
{ {
name: "获取用户信息", name: "获取用户信息",
url: "get-user-info", url: "get-user-info",
}, },
] as Page[], ] as Page[],
}, },
{ {
id: "share", id: "share",
name: "分享", name: "分享",
open: false, open: false,
pages: [ pages: [
{ {
name: "分享", name: "分享",
url: "share", url: "share",
}, },
] as Page[], ] as Page[],
}, },
{ {
id: "payment", id: "payment",
name: "支付", name: "支付",
open: false, open: false,
pages: [ pages: [
{ {
name: "发起支付", name: "发起支付",
url: "request-payment", url: "request-payment",
}, },
] as Page[], ] as Page[],
}, },
{ {
id: "speech", id: "speech",
name: "语音", name: "语音",
open: false, open: false,
pages: [ pages: [
{ {
name: "语音识别", name: "语音识别",
url: "/platforms/app-plus/speech/speech", url: "/platforms/app-plus/speech/speech",
}, },
] as Page[], ] as Page[],
}, },
{ {
id: "push", id: "push",
name: "推送", name: "推送",
open: false, open: false,
pages: [ pages: [
{ {
name: "推送", name: "推送",
url: "/platforms/app-plus/push/push", url: "/platforms/app-plus/push/push",
}, },
] as Page[], ] as Page[],
}, */ }, */
{ {
id: 'exit', id: 'exit',
name: '退出', name: '退出',
open: false, open: false,
pages: [ pages: [
{ {
name: 'exit退出', name: 'exit退出',
url: 'exit', url: 'exit',
enable: true enable: true
}, },
] as Page[], ] as Page[],
}, },
] as ListItem[], ] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png', arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png', arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png', arrowRightIcon: '/static/icons/arrow-right.png',
} }
}, },
methods: { methods: {
triggerCollapse(index?: number, item: ListItem) { triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) { if (item.pages.length == 0) {
const page: Page = { const page : Page = {
name: item.name, name: item.name,
enable: item.enable, enable: item.enable,
url: item.url!, url: item.url!,
} }
this.goDetailPage(page) this.goDetailPage(page)
return return
} }
for (var i = 0; i < this.list.length; ++i) { for (var i = 0; i < this.list.length; ++i) {
if (index == i) { if (index == i) {
this.list[i].open = !this.list[i].open this.list[i].open = !this.list[i].open
} else { } else {
this.list[i].open = false this.list[i].open = false
} }
} }
}, },
goDetailPage(e: Page) { goDetailPage(e : Page) {
if (e.enable == false) { if (e.enable == false) {
uni.showToast({ uni.showToast({
title: '暂不支持', title: '暂不支持',
icon: 'none', icon: 'none',
}) })
return return
} }
const url = const url =
e.url.indexOf('platform') > -1 ? e.url : `/pages/API/${e.url}/${e.url}` e.url.indexOf('platform') > -1 ? e.url : `/pages/API/${e.url}/${e.url}`
uni.navigateTo({ uni.navigateTo({
url, url,
}) })
}, },
}, },
} }
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
</style>
.item {
margin-bottom: 12px;
}
</style>
\ No newline at end of file
pages/tabBar/CSS.uvue
浏览文件 @ e8674538
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view class="uni-container"> <view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image class="uni-header-image" src="/static/cssIndex.png"></image> <image class="uni-header-image" src="/static/cssIndex.png"></image>
</view> </view>
<view class="uni-hello-text"> <view class="uni-hello-text">
<text class="hello-text" <text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
>uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text <u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
> </view>
<u-link <uni-collapse>
:href="'https://uniapp.dcloud.io/component/'" <template v-for="item in list" :key="item.id">
:text="'https://uniapp.dcloud.io/component/'" <uni-collapse-item :title="item.name" class="item">
:inWhiteList="true" <view class="uni-navigate-item":hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
></u-link> <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
</view> <image :src="arrowRightIcon" class="uni-icon"></image>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> </view>
<view </uni-collapse-item>
class="uni-panel-h" </template>
:class="item.open ? 'uni-panel-h-on' : ''" </uni-collapse>
@click="triggerCollapse(index, item)" <!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
> <view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text <text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
class="uni-panel-text" <image :src="
:class="item.enable == false ? 'text-disabled' : ''"
>{{ item.name }}</text
>
<image
:src="
item.pages.length > 0 item.pages.length > 0
? item.open ? item.open
? arrowUpIcon ? arrowUpIcon
: arrowDownIcon : arrowDownIcon
: arrowRightIcon : arrowRightIcon
" " class="uni-icon"></image>
class="uni-icon" </view>
></image> <view class="uni-panel-c" v-if="item.open">
</view> <view class="uni-navigate-item" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<view class="uni-panel-c" v-if="item.open"> <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<view <image :src="arrowRightIcon" class="uni-icon"></image>
class="uni-navigate-item" </view>
v-for="(page, key) in item.pages" </view>
:key="key" </view> -->
@click="goDetailPage(page)" </view>
> <!-- #ifdef APP -->
<text </scroll-view>
class="uni-navigate-text" <!-- #endif -->
:class="page.enable == false ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template> </template>
<script lang="ts"> <script lang="ts">
type Page = { type Page = {
name: string name : string
enable?: boolean enable ?: boolean
url?: string url ?: string
} }
type ListItem = { type ListItem = {
id: string id : string
name: string name : string
open: boolean open : boolean
pages: Page[] pages : Page[]
url?: string url ?: string
enable?: boolean enable ?: boolean
} }
export default { export default {
data() { data() {
return { return {
list: [ list: [
{ {
id: 'background', id: 'background',
name: 'background', name: 'background',
open: false, open: false,
pages: [ pages: [
{ {
name: 'background-color', name: 'background-color',
url: '/pages/CSS/background/background-color', url: '/pages/CSS/background/background-color',
}, },
{ {
name: 'background-image', name: 'background-image',
url: '/pages/CSS/background/background-image', url: '/pages/CSS/background/background-image',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'border', id: 'border',
name: 'border', name: 'border',
open: false, open: false,
pages: [ pages: [
{ {
name: 'border', name: 'border',
url: '/pages/CSS/border/border', url: '/pages/CSS/border/border',
}, },
{ {
name: 'border-width', name: 'border-width',
url: '/pages/CSS/border/border-width', url: '/pages/CSS/border/border-width',
}, },
{ {
name: 'border-style', name: 'border-style',
url: '/pages/CSS/border/border-style', url: '/pages/CSS/border/border-style',
}, },
{ {
name: 'border-color', name: 'border-color',
url: '/pages/CSS/border/border-color', url: '/pages/CSS/border/border-color',
}, },
{ {
name: 'border-radius', name: 'border-radius',
url: '/pages/CSS/border/border-radius', url: '/pages/CSS/border/border-radius',
}, },
{ {
name: 'border属性复合示例', name: 'border属性复合示例',
url: '/pages/CSS/border/complex-border/complex-border', url: '/pages/CSS/border/complex-border/complex-border',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'box-shadow', id: 'box-shadow',
name: 'box-shadow', name: 'box-shadow',
open: false, open: false,
pages: [ pages: [
{ {
name: 'box-shadow', name: 'box-shadow',
url: '/pages/CSS/box-shadow/box-shadow', url: '/pages/CSS/box-shadow/box-shadow',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'flex', id: 'flex',
name: 'flex', name: 'flex',
open: false, open: false,
pages: [ pages: [
{ {
name: 'align-content', name: 'align-content',
url: '/pages/CSS/flex/align-content', url: '/pages/CSS/flex/align-content',
}, },
{ {
name: 'align-items', name: 'align-items',
url: '/pages/CSS/flex/align-items', url: '/pages/CSS/flex/align-items',
}, },
{ {
name: 'flex-basis', name: 'flex-basis',
url: '/pages/CSS/flex/flex-basis', url: '/pages/CSS/flex/flex-basis',
}, },
{ {
name: 'flex-direction', name: 'flex-direction',
url: '/pages/CSS/flex/flex-direction', url: '/pages/CSS/flex/flex-direction',
}, },
{ {
name: 'flex-flow', name: 'flex-flow',
url: '/pages/CSS/flex/flex-flow', url: '/pages/CSS/flex/flex-flow',
}, },
{ {
name: 'flex-grow', name: 'flex-grow',
url: '/pages/CSS/flex/flex-grow', url: '/pages/CSS/flex/flex-grow',
}, },
{ {
name: 'flex-shrink', name: 'flex-shrink',
url: '/pages/CSS/flex/flex-shrink', url: '/pages/CSS/flex/flex-shrink',
}, },
{ {
name: 'flex', name: 'flex',
url: '/pages/CSS/flex/flex', url: '/pages/CSS/flex/flex',
}, },
{ {
name: 'justify-content', name: 'justify-content',
url: '/pages/CSS/flex/justify-content', url: '/pages/CSS/flex/justify-content',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'layout', id: 'layout',
name: 'layout', name: 'layout',
open: false, open: false,
pages: [ pages: [
{ {
name: 'height', name: 'height',
url: '/pages/CSS/layout/height', url: '/pages/CSS/layout/height',
}, },
{ {
name: 'max-height', name: 'max-height',
url: '/pages/CSS/layout/max-height', url: '/pages/CSS/layout/max-height',
}, },
{ {
name: 'max-width', name: 'max-width',
url: '/pages/CSS/layout/max-width', url: '/pages/CSS/layout/max-width',
}, },
{ {
name: 'min-height', name: 'min-height',
url: '/pages/CSS/layout/min-height', url: '/pages/CSS/layout/min-height',
}, },
{ {
name: 'min-width', name: 'min-width',
url: '/pages/CSS/layout/min-width', url: '/pages/CSS/layout/min-width',
}, },
{ {
name: 'position', name: 'position',
url: '/pages/CSS/layout/position', url: '/pages/CSS/layout/position',
}, },
{ {
name: 'width', name: 'width',
url: '/pages/CSS/layout/width', url: '/pages/CSS/layout/width',
}, },
{ {
name: 'visibility', name: 'visibility',
url: '/pages/CSS/layout/visibility', url: '/pages/CSS/layout/visibility',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'margin', id: 'margin',
name: 'margin', name: 'margin',
open: false, open: false,
pages: [ pages: [
{ {
name: 'margin-bottom', name: 'margin-bottom',
url: '/pages/CSS/margin/margin-bottom', url: '/pages/CSS/margin/margin-bottom',
}, },
{ {
name: 'margin-left', name: 'margin-left',
url: '/pages/CSS/margin/margin-left', url: '/pages/CSS/margin/margin-left',
}, },
{ {
name: 'margin-right', name: 'margin-right',
url: '/pages/CSS/margin/margin-right', url: '/pages/CSS/margin/margin-right',
}, },
{ {
name: 'margin-top', name: 'margin-top',
url: '/pages/CSS/margin/margin-top', url: '/pages/CSS/margin/margin-top',
}, },
{ {
name: 'margin', name: 'margin',
url: '/pages/CSS/margin/margin', url: '/pages/CSS/margin/margin',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'padding', id: 'padding',
name: 'padding', name: 'padding',
open: false, open: false,
pages: [ pages: [
{ {
name: 'padding-bottom', name: 'padding-bottom',
url: '/pages/CSS/padding/padding-bottom', url: '/pages/CSS/padding/padding-bottom',
}, },
{ {
name: 'padding-left', name: 'padding-left',
url: '/pages/CSS/padding/padding-left', url: '/pages/CSS/padding/padding-left',
}, },
{ {
name: 'padding-right', name: 'padding-right',
url: '/pages/CSS/padding/padding-right', url: '/pages/CSS/padding/padding-right',
}, },
{ {
name: 'padding-top', name: 'padding-top',
url: '/pages/CSS/padding/padding-top', url: '/pages/CSS/padding/padding-top',
}, },
{ {
name: 'padding', name: 'padding',
url: '/pages/CSS/padding/padding', url: '/pages/CSS/padding/padding',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'text', id: 'text',
name: 'text', name: 'text',
open: false, open: false,
pages: [ pages: [
{ {
name: 'color', name: 'color',
url: '/pages/CSS/text/color', url: '/pages/CSS/text/color',
}, },
{ {
name: 'font-family', name: 'font-family',
url: '/pages/CSS/text/font-family', url: '/pages/CSS/text/font-family',
}, },
{ {
name: 'font-size', name: 'font-size',
url: '/pages/CSS/text/font-size', url: '/pages/CSS/text/font-size',
}, },
{ {
name: 'font-style', name: 'font-style',
url: '/pages/CSS/text/font-style', url: '/pages/CSS/text/font-style',
}, },
{ {
name: 'font-weight', name: 'font-weight',
url: '/pages/CSS/text/font-weight', url: '/pages/CSS/text/font-weight',
}, },
{ {
name: 'line-height', name: 'line-height',
url: '/pages/CSS/text/line-height', url: '/pages/CSS/text/line-height',
}, },
{ {
name: 'text-align', name: 'text-align',
url: '/pages/CSS/text/text-align', url: '/pages/CSS/text/text-align',
}, },
{ {
name: 'text-overflow', name: 'text-overflow',
url: '/pages/CSS/text/text-overflow', url: '/pages/CSS/text/text-overflow',
}, },
{ {
name: 'text-decoration-line', name: 'text-decoration-line',
url: '/pages/CSS/text/text-decoration-line', url: '/pages/CSS/text/text-decoration-line',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'animate', id: 'animate',
name: '动画', name: '动画',
open: false, open: false,
pages: [ pages: [
{ {
name: 'transition', name: 'transition',
url: '/pages/CSS/transition/transition', url: '/pages/CSS/transition/transition',
}, },
{ {
name: 'transform', name: 'transform',
url: '/pages/CSS/transform/transform', url: '/pages/CSS/transform/transform',
}, },
] as Page[], ] as Page[],
}, },
] as ListItem[], ] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png', arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png', arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png', arrowRightIcon: '/static/icons/arrow-right.png',
} }
}, },
methods: { methods: {
triggerCollapse(index?: number, item: ListItem) { triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) { if (item.pages.length == 0) {
const page: Page = { const page : Page = {
name: item.name, name: item.name,
enable: item.enable, enable: item.enable,
url: item.url, url: item.url,
} }
this.goDetailPage(page) this.goDetailPage(page)
return return
} }
for (var i = 0; i < this.list.length; ++i) { for (var i = 0; i < this.list.length; ++i) {
if (index == i) { if (index == i) {
this.list[i].open = !this.list[i].open this.list[i].open = !this.list[i].open
} else { } else {
this.list[i].open = false this.list[i].open = false
} }
} }
}, },
goDetailPage(e: Page) { goDetailPage(e : Page) {
if (e.enable == false) { if (e.enable == false) {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '暂不支持', title: '暂不支持',
}) })
return return
} }
const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}` const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
uni.navigateTo({ uni.navigateTo({
url, url,
}) })
}, },
}, },
} }
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
</style> .item {
margin-bottom: 12px;
}
</style>
\ No newline at end of file
pages/tabBar/component.uvue
浏览文件 @ e8674538
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view class="uni-container"> <view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image <image class="uni-header-image" src="/static/componentIndex.png"></image>
class="uni-header-image" </view>
src="/static/componentIndex.png" <view class="uni-hello-text">
></image> <text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
</view> <u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
<view class="uni-hello-text"> </view>
<text class="hello-text" <uni-collapse>
>uni-app内置组件，展示样式仅供参考，文档详见：</text <template v-for="item in list" :key="item.id">
> <uni-collapse-item :title="item.name" class="item">
<u-link <view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
:href="'https://uniapp.dcloud.io/component/'" <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
:text="'https://uniapp.dcloud.io/component/'" <image :src="arrowRightIcon" class="uni-icon"></image>
:inWhiteList="true" </view>
></u-link> </uni-collapse-item>
</view> </template>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> </uni-collapse>
<view <!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
class="uni-panel-h" <view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
:class="item.open ? 'uni-panel-h-on' : ''" <text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
@click="triggerCollapse(index, item)" <image :src="
>
<text
class="uni-panel-text"
:class="item.enable == false ? 'text-disabled' : ''"
>{{ item.name }}</text
>
<image
:src="
item.pages.length > 0 item.pages.length > 0
? item.open ? item.open
? arrowUpIcon ? arrowUpIcon
: arrowDownIcon : arrowDownIcon
: arrowRightIcon : arrowRightIcon
" " class="uni-icon"></image>
class="uni-icon" </view>
></image> <view class="uni-panel-c" v-if="item.open">
</view> <view class="uni-navigate-item" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<view class="uni-panel-c" v-if="item.open"> <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<view <image :src="arrowRightIcon" class="uni-icon"></image>
class="uni-navigate-item" </view>
v-for="(page, key) in item.pages" </view>
:key="key" </view> -->
@click="goDetailPage(page)" </view>
> <!-- #ifdef APP -->
<text </scroll-view>
class="uni-navigate-text" <!-- #endif -->
:class="page.enable == false ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template> </template>
<script lang="ts"> <script lang="ts">
type Page = { type Page = {
name: string name : string
enable?: boolean enable ?: boolean
url?: string url ?: string
} }
type ListItem = { type ListItem = {
id: string id : string
name: string name : string
open: boolean open : boolean
pages: Page[] pages : Page[]
url?: string url ?: string
enable?: boolean enable ?: boolean
} }
export default { export default {
data() { data() {
return { return {
list: [ list: [
{ {
id: 'view', id: 'view',
name: '视图容器', name: '视图容器',
open: false, open: false,
pages: [ pages: [
{ {
name: 'view', name: 'view',
}, },
{ {
name: 'scroll-view', name: 'scroll-view',
}, },
{ {
name: 'swiper', name: 'swiper',
}, },
/* /*
{ {
name: 'movable-view', name: 'movable-view',
enable: false enable: false
}, },
{ {
name: 'cover-view', name: 'cover-view',
enable: false enable: false
}, },
*/ */
{ {
name: 'list（新闻）', name: 'list（新闻）',
url: '/pages/component/list-news/list', url: '/pages/component/list-news/list',
}, },
{ {
name: 'list', name: 'list',
url: '/pages/component/long-list/long-list', url: '/pages/component/long-list/long-list',
}, },
{ {
name: 'list-view-autotest', name: 'list-view-autotest',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'content', id: 'content',
name: '基础内容', name: '基础内容',
open: false, open: false,
pages: [ pages: [
{ {
name: 'text', name: 'text',
}, },
{ {
name: 'rich-text', name: 'rich-text',
enable: false, enable: false,
}, },
{ {
name: 'progress', name: 'progress',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: 'form', id: 'form',
name: '表单组件', name: '表单组件',
open: false, open: false,
pages: [ pages: [
{ {
name: 'button', name: 'button',
}, },
{ {
name: 'checkbox', name: 'checkbox',
}, },
/* { /* {
name: 'form', name: 'form',
enable: false enable: false
}, */ }, */
{ {
name: 'input', name: 'input',
/* }, { /* }, {
name: 'label', name: 'label',
enable: false enable: false
}, { }, {
name: 'picker', name: 'picker',
enable: false */ enable: false */
}, },
{ {
name: 'picker-view', name: 'picker-view',
}, },
{ {
name: 'radio', name: 'radio',
}, },
{ {
name: 'slider', name: 'slider',
}, },
{ {
name: 'slider-100', name: 'slider-100',
}, },
{ {
name: 'switch', name: 'switch',
}, },
{ {
name: 'textarea', name: 'textarea',
}, },
/* /*
{ {
name: 'editor', name: 'editor',
enable: false enable: false
}, },
*/ */
] as Page[], ] as Page[],
}, },
{ {
id: 'nav', id: 'nav',
name: '导航', name: '导航',
open: false, open: false,
pages: [{ pages: [{
name: 'navigator', name: 'navigator',
enable: true enable: true
}] as Page[], }] as Page[],
}, },
{ {
id: 'media', id: 'media',
name: '媒体组件', name: '媒体组件',
open: false, open: false,
pages: [ pages: [
{ {
name: 'image', name: 'image',
enable: true, enable: true,
}, },
{ {
name: 'video', name: 'video',
enable: true, enable: true,
}, },
{ {
name: 'animation-view', name: 'animation-view',
enable: false, enable: false,
}, },
] as Page[], ] as Page[],
}, },
/* /*
{ {
id: 'map', id: 'map',
name: '地图', name: '地图',
open: false, open: false,
pages: [ pages: [
{ {
name: 'map', name: 'map',
enable: false enable: false
} }
] as Page[] ] as Page[]
}, },
{ {
id: 'canvas', id: 'canvas',
name: '画布', name: '画布',
open: false, open: false,
pages: [ pages: [
{ {
name: 'canvas' name: 'canvas'
} }
] as Page[] ] as Page[]
}, },
*/ */
{ {
id: 'web-view', id: 'web-view',
name: '网页', name: '网页',
open: false, open: false,
pages: [ pages: [
{ {
name: '网络网页', name: '网络网页',
enable: true, enable: true,
url: '/pages/component/web-view/web-view', url: '/pages/component/web-view/web-view',
}, },
{ {
name: '本地网页', name: '本地网页',
enable: true, enable: true,
url: '/pages/component/web-view-local/web-view-local', url: '/pages/component/web-view-local/web-view-local',
}, },
] as Page[], ] as Page[],
}, },
/* /*
{ {
id: 'ad', id: 'ad',
url: 'ad', url: 'ad',
name: 'AD组件', name: 'AD组件',
enable: false, enable: false,
open: false, open: false,
pages: [] as Page[] pages: [] as Page[]
} }
*/ */
] as ListItem[], {
arrowUpIcon: '/static/icons/arrow-up.png', id: 'general-attr-event',
arrowDownIcon: '/static/icons/arrow-down.png', name: '通用属性和事件',
arrowRightIcon: '/static/icons/arrow-right.png', open: false,
} pages: [
}, {
methods: { name: '通用属性',
triggerCollapse(index?: number, item: ListItem) { url: 'general-attr',
if (item.pages.length == 0) { enable: false,
const page: Page = { },
name: item.name, {
enable: item.enable, name: '通用事件',
url: item.url, url: '/pages/component/general-event/general-event',
} enable: true,
this.goDetailPage(page) },
return ] as Page[],
} },
for (var i = 0; i < this.list.length; ++i) { ] as ListItem[],
if (index == i) { arrowUpIcon: '/static/icons/arrow-up.png',
this.list[i].open = !this.list[i].open arrowDownIcon: '/static/icons/arrow-down.png',
} else { arrowRightIcon: '/static/icons/arrow-right.png',
this.list[i].open = false }
} },
} methods: {
}, triggerCollapse(index ?: number, item : ListItem) {
goDetailPage(e: Page) { if (item.pages.length == 0) {
if (e.enable == false) { const page : Page = {
uni.showToast({ name: item.name,
title: '暂不支持', enable: item.enable,
icon: 'none', url: item.url,
}) }
return this.goDetailPage(page)
} return
const url = }
e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}` for (var i = 0; i < this.list.length; ++i) {
uni.navigateTo({ if (index == i) {
url, this.list[i].open = !this.list[i].open
}) } else {
}, this.list[i].open = false
}, }
} }
},
goDetailPage(e : Page) {
if (e.enable == false) {
uni.showToast({
title: '暂不支持',
icon: 'none',
})
return
}
const url =
e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
uni.navigateTo({
url,
})
},
},
}
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
</style>
.item {
margin-bottom: 12px;
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或