提交 e5c76e0e 编写于 作者: zhujiamin's avatar zhujiamin

侧滑菜单支持手势滑动

上级 f25ba9f1
...@@ -5,11 +5,15 @@ ...@@ -5,11 +5,15 @@
height: 100%; height: 100%;
} }
.app-mob-menu-sideslip-view{ .app-mob-menu-sideslip-view{
height: 100%;
ion-button{ ion-button{
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 0; left: 0;
} }
v-touch{
height: 100%;
}
} }
.app-menu-plugin{ .app-menu-plugin{
.header{ .header{
......
<template> <template>
<ion-tabs ref="ionNav" class="app-mob-menu-sideslip-view" @ionTabsDidChange="selectItem($event)"> <div class="app-mob-menu-sideslip-view">
<ion-button @click="openMenu" size="small" v-show="isShowSideSlipMenu" style="z-index:999;"> <van-popup v-model="showPopup" get-container="#app" position="left" :style="{ height: '100%',width: '80%' }" duration="0.2">
<ion-icon name="menu-outline"></ion-icon>
</ion-button>
<van-popup v-model="showPopup" get-container="#app" position="left" :style="{ height: '100%',width: '80%' }">
<div class="app-menu-plugin"> <div class="app-menu-plugin">
<div class="header"> <div class="header">
<img src="assets/images/logo.png" class="ibizLogo"/> <img src="assets/images/logo.png" class="ibizLogo"/>
...@@ -28,12 +25,14 @@ ...@@ -28,12 +25,14 @@
</div> </div>
</div> </div>
</van-popup> </van-popup>
<template v-for="item in items"> <v-touch v-on:swiperight="onSwipeLeft" style="height:100%;">
<template v-if="!item.hidden" > <template v-for="item in items">
<component :key="item.id" v-if="item.id == activeId" :is="item.componentname" viewDefaultUsage="indexView"></component> <template v-if="!item.hidden">
</template> <component :key="item.id" v-if="item.id == activeId" :is="item.componentname" viewDefaultUsage="indexView"></component>
</template> </template>
</ion-tabs> </template>
</v-touch>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -45,6 +44,16 @@ import { Environment } from '@/environments/environment'; ...@@ -45,6 +44,16 @@ import { Environment } from '@/environments/environment';
}) })
export default class AppMobMenuSideslipView extends Vue { export default class AppMobMenuSideslipView extends Vue {
/**
* 滑动打开弹出层
*
* @type {*}
* @memberof AppMobMenuSideslipView
*/
public onSwipeLeft(){
this.showPopup= true;
}
/** /**
* 是否能显示侧滑菜单 * 是否能显示侧滑菜单
* *
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册