1***@qq.com
1***@qq.com
  • 发布:2019-06-14 09:54
  • 更新:2019-11-27 21:43
  • 阅读:919

webview 加载外部页面完成后 顶部菜单动态加载的抽屉功能失效 急求大神解决

分类:uni-app

webview 加载外部页面完成后 顶部菜单动态加载的抽屉功能失效了有解决办法没
首先使用抽屉组件uni-drawer.vue(公共组件没有问题)
<template>
<view v-if="visibleSync" :class="{'uni-drawer--visible':showDrawer,'uni-drawer--right':rightMode}" class="uni-drawer" @touchmove.stop.prevent="moveHandle">
<view class="uni-drawermask" @click="close" />
<view class="uni-drawercontent">
<slot />
</view>
</view>
</template>
第二步在webview界面动态加载抽屉组件以及webview url
<template>
<view class="example">
<uni-drawer :visible="showRigth" mode="right" @close="closeDrawer('right')">
<!-- #ifndef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
<uni-list>
<uni-list-item :title="value.name" show-arrow="false" v-for="(value, key) in list" :key ="key" @click="showSvg(value.param)"></uni-list-item>
</uni-list>
<!-- #endif -->
<!-- #ifdef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
<view class="uni-list">
<uni-list-item :title="value.name" show-arrow="false" v-for="(value, key) in list" :key ="key" @click="showSvg(value.param)"></uni-list-item>
</view>
<!-- #endif -->
<view class="close">
<button type="default" @click="hide">关闭Drawer</button>
</view>
</uni-drawer>
<web-view @touchmove.stop.prevent="moveHandle" :src="url"></web-view>
</view>
</template>
<script>
import uniIcon from '@/components/uni-icon/uni-icon.vue'
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'

export default {
components: {
uniIcon,
uniDrawer,
uniList,
uniListItem
},
data() {
return {
showRigth: true,
httpUrl : 'http://。。。',
url : 'http://。。。?id=540',
list : [
{name:'测试1',param:'?id=540'},
{name:'测试2',param:'?id=542'},
{name:'测试3',param:'?id=564'}
]
}
},
methods: {
show(e) {
this.showRigth = true
},
hide() {
this.showRigth = false
},
closeDrawer(e) {
this.showRigth = false
},
showSvg(param) {
this.showRigth = false;
this.url = this.httpUrl + param;
}
},
onNavigationBarButtonTap(e) {
this.showRigth = !this.showRigth
},
onBackPress() {
if (this.showRigth) {
this.hide()
return true
}
},
onLoad() {

}    

}
</script>
最后就点不动了,去掉webview就可以加载了

2019-06-14 09:54 负责人:无 分享
已邀请:
DCloud_UNI_HT

DCloud_UNI_HT

<web-view> 组件默认铺满全屏并且层级高于前端组件。App端想调节大小或再其上覆盖内容需使用plus规范。

nbd

nbd

这个问题解决了吗?作者

该问题目前已经被锁定, 无法添加新回复