Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6132
Star 98
Fork 169
H
hello uni-app x
提交 7ddb94bb 编写于 作者: M mehaotian
浏览文件
操作

feat: 折叠面板

上级 68113477
隐藏空白更改
内联 并排
Showing with 339 addition and 424 deletion
App.uvue
浏览文件 @ 7ddb94bb
...@@ -30,11 +30,10 @@ export default { ...@@ -30,11 +30,10 @@ export default {
setLifeCycleNum(state.lifeCycleNum - 100) setLifeCycleNum(state.lifeCycleNum - 100)
console.log('App Hide') console.log('App Hide')
}, },
onLastPageBackPress: function (): boolean | null { onLastPageBackPress: function () {
// 自动化测试 // 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1000) setLifeCycleNum(state.lifeCycleNum - 1000)
console.log('App LastPageBackPress') console.log('App LastPageBackPress')
return null
}, },
methods: { methods: {
increasetLifeCycleNum() { increasetLifeCycleNum() {
......
components/uni-collapse-item/uni-collapse-item.vue
浏览文件 @ 7ddb94bb
...@@ -67,11 +67,13 @@ ...@@ -67,11 +67,13 @@
oepnOrClose(open: boolean) { oepnOrClose(open: boolean) {
const boxNode = this.boxNode?.style!; const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!; const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none'; let hide = open ? 'flex' : 'none';
const opacity = open ? 1 : 0
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)'; let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide); boxNode.setProperty('display', hide);
this.$nextTick(() => { this.$nextTick(() => {
contentNode.setProperty('transform', ani_transform); contentNode.setProperty('transform', ani_transform);
contentNode.setProperty('opacity', opacity);
}) })
} }
} }
...@@ -130,6 +132,7 @@ ...@@ -130,6 +132,7 @@
width: 100%; width: 100%;
transition-property: transform; transition-property: transform;
transition-duration: 0.3s; transition-duration: 0.3s;
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0;
} }
</style> </style>
\ No newline at end of file
pages/tabBar/API.uvue
浏览文件 @ 7ddb94bb
...@@ -22,24 +22,6 @@ ...@@ -22,24 +22,6 @@
</template> </template>
</uni-collapse> </uni-collapse>
<!-- <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 class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
<image :src="
item.pages.length >
? item.open
? arrowUpIcon
: arrowDownIcon
: arrowRightIcon
" class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view> -->
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
......
pages/tabBar/CSS.uvue
浏览文件 @ 7ddb94bb
<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">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text> <text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/css/'" :text="'https://uniapp.dcloud.io/uni-app-x/css/'" :inWhiteList="true"></u-link> <u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
</view> </view>
<uni-collapse> <uni-collapse>
<template v-for="item in list" :key="item.id"> <template v-for="item in list" :key="item.id">
...@@ -19,379 +19,327 @@ ...@@ -19,379 +19,327 @@
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</template> </template>
</uni-collapse> </uni-collapse>
<!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id"> </view>
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)"> <!-- #ifdef APP -->
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text> </scroll-view>
<image :src=" <!-- #endif -->
item.pages.length > 0 </template>
? item.open
? arrowUpIcon <script lang="ts">
: arrowDownIcon type Page = {
: arrowRightIcon name : string
" class="uni-icon"></image> enable ?: boolean
</view> url ?: string
<view class="uni-panel-c" v-if="item.open"> }
<view class="uni-navigate-item" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)"> type ListItem = {
<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text> id : string
<image :src="arrowRightIcon" class="uni-icon"></image> name : string
</view> open : boolean
</view> pages : Page[]
</view> --> url ?: string
</view> enable ?: boolean
<!-- #ifdef APP --> }
</scroll-view> export default {
<!-- #endif --> data() {
</template> return {
list: [
<script lang="ts"> {
type Page = { id: 'background',
name : string name: 'background',
enable ?: boolean open: false,
url ?: string pages: [
} {
type ListItem = { name: 'background-color',
id : string url: '/pages/CSS/background/background-color',
name : string },
open : boolean {
pages : Page[] name: 'background-image',
url ?: string url: '/pages/CSS/background/background-image',
enable ?: boolean },
} ] as Page[],
export default { },
data() { {
return { id: 'border',
list: [ name: 'border',
{ open: false,
id: 'background', pages: [
name: 'background', {
open: false, name: 'border',
pages: [ url: '/pages/CSS/border/border',
{ },
name: 'background-color', {
url: '/pages/CSS/background/background-color', name: 'border-width',
}, url: '/pages/CSS/border/border-width',
{ },
name: 'background-image', {
url: '/pages/CSS/background/background-image', name: 'border-style',
}, url: '/pages/CSS/border/border-style',
] as Page[], },
}, {
{ name: 'border-color',
id: 'border', url: '/pages/CSS/border/border-color',
name: 'border', },
open: false, {
pages: [ name: 'border-radius',
{ url: '/pages/CSS/border/border-radius',
name: 'border', },
url: '/pages/CSS/border/border', {
}, name: 'border属性复合示例',
{ url: '/pages/CSS/border/complex-border/complex-border',
name: 'border-width', },
url: '/pages/CSS/border/border-width', ] as Page[],
}, },
{ {
name: 'border-style', id: 'box-shadow',
url: '/pages/CSS/border/border-style', name: 'box-shadow',
}, open: false,
{ pages: [
name: 'border-color', {
url: '/pages/CSS/border/border-color', name: 'box-shadow',
}, url: '/pages/CSS/box-shadow/box-shadow',
{ },
name: 'border-radius', ] as Page[],
url: '/pages/CSS/border/border-radius', },
}, {
{ id: 'flex',
name: 'border属性复合示例', name: 'flex',
url: '/pages/CSS/border/complex-border/complex-border', open: false,
}, pages: [
] as Page[], {
}, name: 'align-content',
{ url: '/pages/CSS/flex/align-content',
id: 'box-shadow', },
name: 'box-shadow', {
open: false, name: 'align-items',
pages: [ url: '/pages/CSS/flex/align-items',
{ },
name: 'box-shadow', {
url: '/pages/CSS/box-shadow/box-shadow', name: 'flex-basis',
}, url: '/pages/CSS/flex/flex-basis',
] as Page[], },
}, {
name: 'flex-direction',
url: '/pages/CSS/flex/flex-direction',
},
{
name: 'flex-flow',
url: '/pages/CSS/flex/flex-flow',
},
{
name: 'flex-grow',
url: '/pages/CSS/flex/flex-grow',
},
{
name: 'flex-shrink',
url: '/pages/CSS/flex/flex-shrink',
},
{
name: 'flex',
url: '/pages/CSS/flex/flex',
},
{
name: 'justify-content',
url: '/pages/CSS/flex/justify-content',
},
] as Page[],
},
{
id: 'layout',
name: 'layout',
open: false,
pages: [
{
name: 'height',
url: '/pages/CSS/layout/height',
},
{
name: 'max-height',
url: '/pages/CSS/layout/max-height',
},
{
name: 'max-width',
url: '/pages/CSS/layout/max-width',
},
{
name: 'min-height',
url: '/pages/CSS/layout/min-height',
},
{
name: 'min-width',
url: '/pages/CSS/layout/min-width',
},
{
name: 'position',
url: '/pages/CSS/layout/position',
},
{
name: 'width',
url: '/pages/CSS/layout/width',
},
{
name: 'visibility',
url: '/pages/CSS/layout/visibility',
},
] as Page[],
},
{
id: 'margin',
name: 'margin',
open: false,
pages: [
{
name: 'margin-bottom',
url: '/pages/CSS/margin/margin-bottom',
},
{
name: 'margin-left',
url: '/pages/CSS/margin/margin-left',
},
{
name: 'margin-right',
url: '/pages/CSS/margin/margin-right',
},
{
name: 'margin-top',
url: '/pages/CSS/margin/margin-top',
},
{
name: 'margin',
url: '/pages/CSS/margin/margin',
},
] as Page[],
},
{
id: 'padding',
name: 'padding',
open: false,
pages: [
{
name: 'padding-bottom',
url: '/pages/CSS/padding/padding-bottom',
},
{
name: 'padding-left',
url: '/pages/CSS/padding/padding-left',
},
{
name: 'padding-right',
url: '/pages/CSS/padding/padding-right',
},
{
name: 'padding-top',
url: '/pages/CSS/padding/padding-top',
},
{
name: 'padding',
url: '/pages/CSS/padding/padding',
},
] as Page[],
},
{
id: 'text',
name: 'text',
open: false,
pages: [
{
name: 'color',
url: '/pages/CSS/text/color',
},
{
name: 'font-family',
url: '/pages/CSS/text/font-family',
},
{
name: 'font-size',
url: '/pages/CSS/text/font-size',
},
{
name: 'font-style',
url: '/pages/CSS/text/font-style',
},
{
name: 'font-weight',
url: '/pages/CSS/text/font-weight',
},
{
name: 'line-height',
url: '/pages/CSS/text/line-height',
},
{
name: 'text-align',
url: '/pages/CSS/text/text-align',
},
{
name: 'text-overflow',
url: '/pages/CSS/text/text-overflow',
},
{
name: 'text-decoration-line',
url: '/pages/CSS/text/text-decoration-line',
},
] as Page[],
},
{ {
id: 'display', id: 'animate',
name: 'display', name: '动画',
open: false, open: false,
pages: [ pages: [
{ {
name: 'flex', name: 'transition',
url: '/pages/CSS/display/flex', url: '/pages/CSS/transition/transition',
}, },
{ {
name: 'none', name: 'transform',
url: '/pages/CSS/display/none', url: '/pages/CSS/transform/transform',
} },
] as Page[], ] as Page[],
}, },
{ ] as ListItem[],
id: 'flex', arrowUpIcon: '/static/icons/arrow-up.png',
name: 'flex', arrowDownIcon: '/static/icons/arrow-down.png',
open: false, arrowRightIcon: '/static/icons/arrow-right.png',
pages: [ }
{ },
name: 'align-content', methods: {
url: '/pages/CSS/flex/align-content', triggerCollapse(index ?: number, item : ListItem) {
}, if (item.pages.length == 0) {
{ const page : Page = {
name: 'align-items', name: item.name,
url: '/pages/CSS/flex/align-items', enable: item.enable,
}, url: item.url,
{ }
name: 'flex-basis', this.goDetailPage(page)
url: '/pages/CSS/flex/flex-basis', return
}, }
{ for (var i = 0; i < this.list.length; ++i) {
name: 'flex-direction', if (index == i) {
url: '/pages/CSS/flex/flex-direction', this.list[i].open = !this.list[i].open
}, } else {
{ this.list[i].open = false
name: 'flex-flow', }
url: '/pages/CSS/flex/flex-flow', }
}, },
{ goDetailPage(e : Page) {
name: 'flex-grow', if (e.enable == false) {
url: '/pages/CSS/flex/flex-grow', uni.showToast({
}, icon: 'none',
{ title: '暂不支持',
name: 'flex-shrink', })
url: '/pages/CSS/flex/flex-shrink', return
}, }
{ const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
name: 'flex', uni.navigateTo({
url: '/pages/CSS/flex/flex', url,
}, })
{ },
name: 'justify-content', },
url: '/pages/CSS/flex/justify-content', }
}, </script>
] as Page[],
}, <style>
{
id: 'layout',
name: 'layout',
open: false,
pages: [
{
name: 'height',
url: '/pages/CSS/layout/height',
},
{
name: 'max-height',
url: '/pages/CSS/layout/max-height',
},
{
name: 'max-width',
url: '/pages/CSS/layout/max-width',
},
{
name: 'min-height',
url: '/pages/CSS/layout/min-height',
},
{
name: 'min-width',
url: '/pages/CSS/layout/min-width',
},
{
name: 'position',
url: '/pages/CSS/layout/position',
},
{
name: 'width',
url: '/pages/CSS/layout/width',
},
{
name: 'visibility',
url: '/pages/CSS/layout/visibility',
},
] as Page[],
},
{
id: 'margin',
name: 'margin',
open: false,
pages: [
{
name: 'margin-bottom',
url: '/pages/CSS/margin/margin-bottom',
},
{
name: 'margin-left',
url: '/pages/CSS/margin/margin-left',
},
{
name: 'margin-right',
url: '/pages/CSS/margin/margin-right',
},
{
name: 'margin-top',
url: '/pages/CSS/margin/margin-top',
},
{
name: 'margin',
url: '/pages/CSS/margin/margin',
},
] as Page[],
},
{
id: 'padding',
name: 'padding',
open: false,
pages: [
{
name: 'padding-bottom',
url: '/pages/CSS/padding/padding-bottom',
},
{
name: 'padding-left',
url: '/pages/CSS/padding/padding-left',
},
{
name: 'padding-right',
url: '/pages/CSS/padding/padding-right',
},
{
name: 'padding-top',
url: '/pages/CSS/padding/padding-top',
},
{
name: 'padding',
url: '/pages/CSS/padding/padding',
},
] as Page[],
},
{
id: 'text',
name: 'text',
open: false,
pages: [
{
name: 'color',
url: '/pages/CSS/text/color',
},
{
name: 'font-family',
url: '/pages/CSS/text/font-family',
},
{
name: 'font-size',
url: '/pages/CSS/text/font-size',
},
{
name: 'font-style',
url: '/pages/CSS/text/font-style',
},
{
name: 'font-weight',
url: '/pages/CSS/text/font-weight',
},
{
name: 'letter-spacing',
url: '/pages/CSS/text/letter-spacing',
},
{
name: 'line-height',
url: '/pages/CSS/text/line-height',
},
{
name: 'text-align',
url: '/pages/CSS/text/text-align',
},
{
name: 'text-overflow',
url: '/pages/CSS/text/text-overflow',
},
{
name: 'text-decoration-line',
url: '/pages/CSS/text/text-decoration-line',
},
] as Page[],
},
{
id: 'transform',
name: 'transform',
open: false,
pages: [
{
name: 'translate',
url: '/pages/CSS/transform/translate',
},
{
name: 'scale',
url: '/pages/CSS/transform/scale',
},
{
name: 'rotate',
url: '/pages/CSS/transform/rotate',
},
] as Page[],
},
{
id: 'transition',
name: 'transition',
open: false,
pages: [
{
name: 'transition',
url: '/pages/CSS/transition/transition',
},
] as Page[],
},
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) {
const page : Page = {
name: item.name,
enable: item.enable,
url: item.url,
}
this.goDetailPage(page)
return
}
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open
} else {
this.list[i].open = false
}
}
},
goDetailPage(e : Page) {
if (e.enable == false) {
uni.showToast({
icon: 'none',
title: '暂不支持',
})
return
}
const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
uni.navigateTo({
url,
})
},
},
}
</script>
<style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
.item { .item {
margin-bottom: 12px; margin-bottom: 12px;
} }
</style> </style>
\ No newline at end of file
pages/tabBar/component.uvue
浏览文件 @ 7ddb94bb
...@@ -20,24 +20,6 @@ ...@@ -20,24 +20,6 @@
</uni-collapse-item> </uni-collapse-item>
</template> </template>
</uni-collapse> </uni-collapse>
<!-- <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 class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
<image :src="
item.pages.length > 0
? item.open
? arrowUpIcon
: arrowDownIcon
: arrowRightIcon
" class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view> -->
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
......
pages/tabBar/template.uvue
浏览文件 @ 7ddb94bb
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
</view> </view>
<view class="uni-panel-c" v-if="item.open"> <view class="uni-panel-c" v-if="item.open">
<view <view
class="uni-navigate-item" class="uni-navigate-item"
:hover-class="page.enable == false?'':'is--active'"
v-for="(page, key) in item.pages" v-for="(page, key) in item.pages"
:key="key" :key="key"
@click="goDetailPage(page)" @click="goDetailPage(page)"
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或