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
...@@ -8,50 +8,38 @@ ...@@ -8,50 +8,38 @@
</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/'"
:text="'https://uniapp.dcloud.io/api/'"
:inWhiteList="true"
></u-link>
</view> </view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view <uni-collapse>
class="uni-panel-h" <template v-for="item in list" :key="item.id">
:class="item.open ? 'uni-panel-h-on' : ''" <uni-collapse-item :title="item.name" class="item">
@click="triggerCollapse(index, item)" <view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'" 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>
<text <image :src="arrowRightIcon" class="uni-icon"></image>
class="uni-panel-text" </view>
:class="item.enable == false ? 'text-disabled' : ''" </uni-collapse-item>
>{{ item.name }}</text </template>
> </uni-collapse>
<image
:src=" <!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
item.pages.length > 0 <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 ? item.open
? arrowUpIcon ? arrowUpIcon
: arrowDownIcon : arrowDownIcon
: arrowRightIcon : arrowRightIcon
" " class="uni-icon"></image>
class="uni-icon"
></image>
</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" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
class="uni-navigate-item" <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
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> <image :src="arrowRightIcon" class="uni-icon"></image>
</view> </view>
</view> </view>
</view> </view> -->
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
...@@ -59,20 +47,20 @@ ...@@ -59,20 +47,20 @@
</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: [
...@@ -130,7 +118,7 @@ export default { ...@@ -130,7 +118,7 @@ export default {
{ {
name: '下拉刷新', name: '下拉刷新',
url: 'pull-down-refresh', url: 'pull-down-refresh',
// enable: false, enable: false,
}, },
{ {
name: '将页面滚动到指定位置', name: '将页面滚动到指定位置',
...@@ -481,9 +469,9 @@ export default { ...@@ -481,9 +469,9 @@ export default {
} }
}, },
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!,
...@@ -499,7 +487,7 @@ export default { ...@@ -499,7 +487,7 @@ export default {
} }
} }
}, },
goDetailPage(e: Page) { goDetailPage(e : Page) {
if (e.enable == false) { if (e.enable == false) {
uni.showToast({ uni.showToast({
title: '暂不支持', title: '暂不支持',
...@@ -514,9 +502,14 @@ export default { ...@@ -514,9 +502,14 @@ export default {
}) })
}, },
}, },
} }
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
.item {
margin-bottom: 12px;
}
</style> </style>
\ No newline at end of file
pages/tabBar/CSS.uvue
浏览文件 @ e8674538
...@@ -7,53 +7,37 @@ ...@@ -7,53 +7,37 @@
<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>
>
<u-link
:href="'https://uniapp.dcloud.io/component/'"
:text="'https://uniapp.dcloud.io/component/'"
:inWhiteList="true"
></u-link>
</view> </view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> <uni-collapse>
<view <template v-for="item in list" :key="item.id">
class="uni-panel-h" <uni-collapse-item :title="item.name" class="item">
:class="item.open ? 'uni-panel-h-on' : ''" <view class="uni-navigate-item":hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
@click="triggerCollapse(index, item)" <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
> <image :src="arrowRightIcon" class="uni-icon"></image>
<text </view>
class="uni-panel-text" </uni-collapse-item>
:class="item.enable == false ? 'text-disabled' : ''" </template>
>{{ item.name }}</text </uni-collapse>
> <!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<image <view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
: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"
></image>
</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" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
class="uni-navigate-item" <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
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> <image :src="arrowRightIcon" class="uni-icon"></image>
</view> </view>
</view> </view>
</view> </view> -->
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
...@@ -61,20 +45,20 @@ ...@@ -61,20 +45,20 @@
</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: [
...@@ -336,9 +320,9 @@ export default { ...@@ -336,9 +320,9 @@ export default {
} }
}, },
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,
...@@ -354,7 +338,7 @@ export default { ...@@ -354,7 +338,7 @@ export default {
} }
} }
}, },
goDetailPage(e: Page) { goDetailPage(e : Page) {
if (e.enable == false) { if (e.enable == false) {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
...@@ -368,9 +352,12 @@ export default { ...@@ -368,9 +352,12 @@ export default {
}) })
}, },
}, },
} }
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
.item {
margin-bottom: 12px;
}
</style> </style>
\ No newline at end of file
pages/tabBar/component.uvue
浏览文件 @ e8674538
...@@ -4,59 +4,40 @@ ...@@ -4,59 +4,40 @@
<!-- #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"
src="/static/componentIndex.png"
></image>
</view> </view>
<view class="uni-hello-text"> <view class="uni-hello-text">
<text class="hello-text" <text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
>uni-app内置组件，展示样式仅供参考，文档详见：</text <u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
>
<u-link
:href="'https://uniapp.dcloud.io/component/'"
:text="'https://uniapp.dcloud.io/component/'"
:inWhiteList="true"
></u-link>
</view> </view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> <uni-collapse>
<view <template v-for="item in list" :key="item.id">
class="uni-panel-h" <uni-collapse-item :title="item.name" class="item">
:class="item.open ? 'uni-panel-h-on' : ''" <view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
@click="triggerCollapse(index, item)" <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
> <image :src="arrowRightIcon" class="uni-icon"></image>
<text </view>
class="uni-panel-text" </uni-collapse-item>
:class="item.enable == false ? 'text-disabled' : ''" </template>
>{{ item.name }}</text </uni-collapse>
> <!-- <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<image <view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
: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"
></image>
</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" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
class="uni-navigate-item" <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
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> <image :src="arrowRightIcon" class="uni-icon"></image>
</view> </view>
</view> </view>
</view> </view> -->
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
...@@ -64,20 +45,20 @@ ...@@ -64,20 +45,20 @@
</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: [
...@@ -263,6 +244,23 @@ export default { ...@@ -263,6 +244,23 @@ export default {
pages: [] as Page[] pages: [] as Page[]
} }
*/ */
{
id: 'general-attr-event',
name: '通用属性和事件',
open: false,
pages: [
{
name: '通用属性',
url: 'general-attr',
enable: false,
},
{
name: '通用事件',
url: '/pages/component/general-event/general-event',
enable: true,
},
] 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',
...@@ -270,9 +268,9 @@ export default { ...@@ -270,9 +268,9 @@ export default {
} }
}, },
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,
...@@ -288,7 +286,7 @@ export default { ...@@ -288,7 +286,7 @@ export default {
} }
} }
}, },
goDetailPage(e: Page) { goDetailPage(e : Page) {
if (e.enable == false) { if (e.enable == false) {
uni.showToast({ uni.showToast({
title: '暂不支持', title: '暂不支持',
...@@ -303,9 +301,14 @@ export default { ...@@ -303,9 +301,14 @@ export default {
}) })
}, },
}, },
} }
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
.item {
margin-bottom: 12px;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或