优化导航下拉菜单折叠

Tevin

2020-12-04 d7565a8f9eb45fe7fa8b96fe346f78620ae04508

优化导航下拉菜单折叠

 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>

 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>