From 897c9822a47cf22146176208610635a660992b3d Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 29 Apr 2022 16:25:38 +0800
Subject: [PATCH] 微调微信支付弹窗显示
---
layout/h5Page/CNavBar.vue | 87 ++++++++++++++++++++++++++++++++++++-------
1 files changed, 72 insertions(+), 15 deletions(-)
diff --git a/layout/h5Page/CNavBar.vue b/layout/h5Page/CNavBar.vue
index cd6d74e..4bd2986 100644
--- a/layout/h5Page/CNavBar.vue
+++ b/layout/h5Page/CNavBar.vue
@@ -2,11 +2,17 @@
<view class="c-nav-bar">
<AtNavBar
:title="title"
- leftIconType="chevron-left"
- :onClickLeftIcon="evt=>goBack()"
+ :leftIconType="iconType"
+ :onClickLeftIcon="evt => onGoBack()"
:rightFirstIconType="dropNav ? 'bullet-list' : ''"
- :onClickRgIconSt="evt=>dropMenu()"
+ :onClickRgIconSt="evt => onDropMenu()"
/>
+ <view
+ class="c-nav-bar-right"
+ v-if="!dropNav"
+ >
+ <slot />
+ </view>
<view
class="c-nav-bar-drop"
v-show="dropShow"
@@ -15,10 +21,10 @@
<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)"
+ @tap="evt=>onGoNav(nav)"
>{{nav.title}}</view>
</view>
</view>
@@ -37,33 +43,84 @@
AtNavBar,
},
props: {
+ // H5页面导航标题
title: String,
+ // H5页面导航左侧图标
+ iconType: {
+ type: String,
+ default: 'chevron-left',
+ },
+ // H5页面导航左侧图点击事件
+ onClickIcon: Function,
+ // H5页面导航右侧下拉菜单配置
dropNav: Array,
},
data() {
return {
dropShow: false,
+ dropTimer: -1,
+ dropActive: false,
};
},
methods: {
- goBack() {
- window.history.go(-1);
+ onGoBack() {
+ if (this.onClickIcon) {
+ const needBack = this.onClickIcon();
+ // 返回 true 时继续跳回上一页
+ if (needBack) {
+ Taro.navigateBack();
+ }
+ } else {
+ Taro.navigateBack();
+ }
},
- goNav(nav) {
+ onGoNav(nav) {
if (!nav.url) {
return;
}
this.dropShow = false;
- let method = 'navigateTo';
- if (/navigate|redirect/.test(nav.method)) {
- method = nav.method + 'To';
- }
- Taro[method]({ url: nav.url });
+ setTimeout(() => {
+ Taro.navigateTo({ url: nav.url });
+ }, 0);
},
- dropMenu() {
+ onDropMenu() {
this.dropShow = !this.dropShow;
+ this.dropActive = true;
+ clearTimeout(this.dropTimer);
+ this.dropTimer = setTimeout(() => {
+ this.dropActive = false;
+ }, 500);
+ },
+ outCloseMenu(evt) {
+ setTimeout(() => {
+ // 未打开时，忽略
+ if (!this.dropShow) {
+ return;
+ }
+ // 刚刚打开的一段时间内，忽略
+ if (this.dropActive) {
+ return;
+ }
+ // 点击了菜单项，忽略
+ const className = evt.target.className;
+ if (
+ className.indexOf('c-nav-bar-drop-item') >= 0 ||
+ className.indexOf('at-nav-bar__container') >= 0
+ ) {
+ return;
+ }
+ // 执行关闭
+ this.dropShow = false;
+ }, 0);
},
},
- 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
--
Gitblit v1.9.1