From d7565a8f9eb45fe7fa8b96fe346f78620ae04508 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 04 Dec 2020 14:30:11 +0800
Subject: [PATCH] 优化导航下拉菜单折叠
---
layout/h5Page/CNavBar.vue | 42 +++++++++++++++++++++++++++++++++++-------
layout/h5Page/CPage.vue | 15 ++++++++++++++-
2 files changed, 49 insertions(+), 8 deletions(-)
diff --git a/layout/h5Page/CNavBar.vue b/layout/h5Page/CNavBar.vue
index cd6d74e..75bed2e 100644
--- a/layout/h5Page/CNavBar.vue
+++ b/layout/h5Page/CNavBar.vue
@@ -15,7 +15,7 @@
<view class="arrow"></view>
<view class="box">
<view
- class="item"
+ class="c-nav-bar-drop-item item"
v-for="(nav,index) in dropNav"
:key="index"
@tap="evt=>goNav(nav)"
@@ -43,6 +43,8 @@
data() {
return {
dropShow: false,
+ dropTimer: -1,
+ dropActive: false,
};
},
methods: {
@@ -54,16 +56,42 @@
return;
}
this.dropShow = false;
- let method = 'navigateTo';
- if (/navigate|redirect/.test(nav.method)) {
- method = nav.method + 'To';
- }
- Taro[method]({ url: nav.url });
+ Taro.navigateTo({ url: nav.url });
},
dropMenu() {
this.dropShow = !this.dropShow;
+ this.dropActive = true;
+ clearTimeout(this.dropTimer);
+ this.dropTimer = setTimeout(() => {
+ this.dropActive = false;
+ }, 500);
+ },
+ outCloseMenu(evt) {
+ (() => {
+ // 未打开时，忽略
+ if (!this.dropShow) {
+ return;
+ }
+ // 刚刚打开的一段时间内，忽略
+ if (this.dropActive) {
+ return;
+ }
+ // 点击了菜单项，忽略
+ if (evt.target.className.indexOf('c-nav-bar-drop-item') >= 0) {
+ return;
+ }
+ // 执行关闭
+ this.dropShow = false;
+ })();
},
},
- mounted() {},
+ mounted() {
+ Taro.eventCenter.on('pageTouchstart', this.outCloseMenu);
+ Taro.eventCenter.on('pageClick', this.outCloseMenu);
+ },
+ beforeDestroy() {
+ Taro.eventCenter.off('pageTouchstart', this.outCloseMenu);
+ Taro.eventCenter.off('pageClick', this.outCloseMenu);
+ },
};
</script>
\ No newline at end of file
diff --git a/layout/h5Page/CPage.vue b/layout/h5Page/CPage.vue
index d7b26c9..58e88d8 100644
--- a/layout/h5Page/CPage.vue
+++ b/layout/h5Page/CPage.vue
@@ -4,15 +4,28 @@
*/
<template>
- <view class="c-page">
+ <view
+ class="c-page"
+ @tap="evt=>handleClick(evt)"
+ @touchstart="evt=>handleTouchstart(evt)"
+ >
<slot />
</view>
</template>
<script>
+import Taro from '@tarojs/taro';
import './cPage.scss';
export default {
name: 'CPage',
+ methods: {
+ handleClick(evt) {
+ Taro.eventCenter.trigger('pageClick', evt);
+ },
+ handleTouchstart(evt) {
+ Taro.eventCenter.trigger('pageTouchstart', evt);
+ },
+ },
};
</script>
\ No newline at end of file
--
Gitblit v1.9.1