解决侧滑菜单左右滑动和主界面内容左右滑动的冲突

src/app-register.ts

@@ -126,7 +126,9 @@ export const AppComponents = {
         v.component('app-mob-select-changeTheme',() => import('@/ibiz-core/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue'));
         // 锚点列表插件
         v.component('app-anchor-list',() => import('@/components/app-anchor-list/app-anchor-list.vue'));
-        // 新菜单组件
+        // 侧滑菜单组件
         v.component('app-mob-menu-sideslip-view',() => import('@/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.vue'));
+        // 侧滑菜单组件头部信息
+        v.component('app-mob-menu-sideslip-view-header',() => import('@/components/app-mob-menu-sideslip-view-header/app-mob-menu-sideslip-view-header.vue'));
     },
 };
\ No newline at end of file

src/components/app-mob-menu-sideslip-view-header/app-mob-menu-sideslip-view-header.less

+.app-mob-menu-sideslip-view-header{
+  .header{
+    padding: 15px;
+    img{
+      margin-top: 20px;
+      width: 30%;
+      margin-bottom: 20px;
+    }
+    .title{
+      color: #fff;
+      font-size: 20px;
+      margin-bottom: 10px;
+    }
+    .text{
+      display: inline-block;
+      padding: 3px 6px;
+      background-color: #fff;
+      color: #333;
+      font-size: 12px;
+      margin-bottom: 20px;
+    }
+    .notice{
+      ion-icon{
+        font-size: 12px;
+      }
+      color: rgb(255, 248, 248);
+      font-size: 10px;
+    }
+  }
+}
\ No newline at end of file

src/components/app-mob-menu-sideslip-view-header/app-mob-menu-sideslip-view-header.vue

+<template>
+  <div class="app-mob-menu-sideslip-view-header">
+    <div class="header">
+      <img src="assets/images/logo.png" class="ibizLogo"/>
+      <div class="title">iBizPMS</div>
+      <div class="text">登录·试用测试版</div>
+      <div class="notice"><ion-icon name="megaphone-outline"></ion-icon> #最新通知——更新/下载</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit, Model } from 'vue-property-decorator';
+import { Environment } from '@/environments/environment';
+@Component({
+    components: {
+    }
+})
+export default class AppMobMenuSideslipView extends Vue {
+
+}
+</script>
+
+<style lang="less">
+@import "./app-mob-menu-sideslip-view-header.less";
+</style>
\ No newline at end of file

src/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.less

@@ -16,34 +16,6 @@
   }
 }
 .app-menu-plugin{
-  .header{
-    padding: 15px;
-    img{
-      margin-top: 20px;
-      width: 30%;
-      margin-bottom: 20px;
-    }
-    .title{
-      color: #fff;
-      font-size: 20px;
-      margin-bottom: 10px;
-    }
-    .text{
-      display: inline-block;
-      padding: 3px 6px;
-      background-color: #fff;
-      color: #333;
-      font-size: 12px;
-      margin-bottom: 20px;
-    }
-    .notice{
-      ion-icon{
-        font-size: 12px;
-      }
-      color: rgb(255, 248, 248);
-      font-size: 10px;
-    }
-  }
   .top{
     .title{
       color:#727272;

src/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.vue

 <template>
-    <div class="app-mob-menu-sideslip-view">
-        <van-popup v-model="showPopup" get-container="#app" position="left" :style="{ height: '100%',width: '80%' }" duration="0.2">
-          <v-touch v-on:swipeleft="onSwipeLeft" style="height:100%;">
+    <div class="app-mob-menu-sideslip-view"> 
+      <van-popup v-model="showPopup" get-container="#app" position="left" :style="{ height: '100%',width: '80%' }" duration="0.2" :close-on-popstate="true">
+        <v-touch v-on:swipeleft="onSwipeLeft" style="height:100%;">
               <div class="app-menu-plugin">
-                <div class="header">
-                  <img src="assets/images/logo.png" class="ibizLogo"/>
-                  <div class="title">iBizPMS</div>
-                  <div class="text">登录·试用测试版</div>
-                  <div class="notice"><ion-icon name="megaphone-outline"></ion-icon> #最新通知——更新/下载</div>
-                </div>
+                <app-mob-menu-sideslip-view-header></app-mob-menu-sideslip-view-header>
                 <div class="top">
                   <div class="title">Menu</div>
                   <template v-for="item in items"  >
@@ -25,34 +20,34 @@
                   </template>
                 </div>
               </div>
-            </v-touch>
-        </van-popup>
-        <v-touch v-on:swiperight="onSwipeRight" style="height:100%;">
-          <template v-for="item in items">
-                  <template v-if="!item.hidden">
-                          <component  :key="item.id" v-if="item.id == activeId" :is="item.componentname" viewDefaultUsage="indexView"></component>
-                  </template>
-          </template>
         </v-touch>
+      </van-popup>
+
+      <v-touch v-on:swiperight="onSwipeRight" style="height:100%;">
+        <template v-for="item in items">
+                <template v-if="!item.hidden">
+                        <component  :key="item.id" v-if="item.id == activeId" :is="item.componentname" viewDefaultUsage="indexView"></component>
+                </template>
+        </template>
+      </v-touch>
     </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Emit, Model } from 'vue-property-decorator';
+import { Vue, Component, Prop, Emit, Model, Provide } from 'vue-property-decorator';
 import { Environment } from '@/environments/environment';
 @Component({
     components: {
     }
 })
 export default class AppMobMenuSideslipView extends Vue {
-
     /**
      * 向左滑动关闭弹出层
      *
      * @type {*}
      * @memberof AppMobMenuSideslipView
      */
-    public onSwipeLeft(){
+    public onSwipeLeft(e:any){
       this.showPopup = false;
     }
 
@@ -63,7 +58,9 @@ export default class AppMobMenuSideslipView extends Vue {
      * @memberof AppMobMenuSideslipView
      */
     public onSwipeRight(){
-      this.showPopup = true;
+      if (this.$store.state.popupStatus) {
+        this.showPopup = true;
+      }
     }
 
     /**
@@ -232,6 +229,10 @@ export default class AppMobMenuSideslipView extends Vue {
                 }
             })
         } 
+        // 阻止冒泡
+        document.addEventListener('touchmove',function(event){
+          event.stopPropagation();
+        },false);
     }
 
     /**

src/store/mutations.ts

@@ -281,4 +281,14 @@ export const setTextAlignStyle = (state: any, val: any) => {
  */
 export const setNavigationStyle = (state: any, val: any) => {
   state.selectNaviStyle = val;
+}
+
+/**
+ * 是否能弹出侧滑菜单
+ * 
+ * @param state 
+ * @param val 
+ */
+export const setPopupStatus = (state: any, val: any) => {
+  state.popupStatus = val;
 }
\ No newline at end of file

src/store/state.ts

@@ -17,4 +17,5 @@ export const rootstate: any = {
     selectStatus:true,
     selectTextAlign:'',
     selectNaviStyle:'',
+    popupStatus:true,
 }
\ No newline at end of file