2***@qq.com
2***@qq.com
  • 发布:2019-07-18 14:20
  • 更新:2023-09-26 15:44
  • 阅读:4634

返回web-view界面时,web-view空白,返回按钮需要点两次才能生效

分类:uni-app

主页是一个web-view嵌入的html文件,在主页navigateTo另一个页面之后点击返回时主页的web-view嵌入的html为空白的。而而且返回键按一次没有效果,还需要按第二次才生效

<template>  
    <view >  
        <web-view :src="src" id="mapwv"></web-view>  
    </view>  
</template>  

<script>  
    var wv  
    export default {  
        data() {  
            return {  
                username: "张三",  
                showLeft: false,  
                src:"../../../hybrid/html/gaodemap/html5/mapscan/index.html",  

            };  
        },  

        onNavigationBarButtonTap(e) {  
            if (e.index == 0) {  
                uni.getSubNVueById('drawer').show('slide-in-left', 200);  
            }  
            if (e.index == 1) {  
                uni.navigateTo({  
                    url: 'new-page/new-page?data=hello'  
                })  
            }  

        },  
        methods: {  
            money() {  
                uni.navigateTo({  
                    url: 'money/money?data=100'  
                })  
            },  
            hide() {  
                this.showLeft = false  
            },  
            closeDrawer(e) {  
                this.showLeft = false  
            }  
        }  
    }  
</script>
2019-07-18 14:20 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

使用原生小程序项目测试一下,如果原生小程序正常,提供一下uni-app测试工程。

7***@qq.com

7***@qq.com

web-view的体验真是不好,刚从mpvue转过来,web-view就没办法控制显示隐藏。问了也没人回答。趁项目没有深入开发,打算换taro了

  • 龙雨溪

    换了taro就能控制了?还是换了taro就有人告诉你就是不能控制了?

    2019-09-17 16:07

2***@qq.com

2***@qq.com (作者)

跳转页面的代码

<template>  
    <view class="root">  
        <page-head :title="data"></page-head>  
        <view class="page-body">  
            <view class="uni-list">  
                <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in list" :key="key">  
                    <view class="uni-media-list" @click="navigateTo(key+1)">  
                        <view class="uni-media-list-logo"><image style="width: 100upx;height: 100upx;" v-if="showImg" :src="value.img"></image></view>  
                        <view class="uni-media-list-body">  
                            <view class="uni-media-list-text-top" style="font-size: 35upx;">{{ value.title }}</view>  
                            <view class="uni-media-list-text-bottom uni-ellipsis">{{ value.content }}</view>  
                        </view>  
                    </view>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            // title: '活动新页面',  
            data:"",  
            showImg: false,  
            list: [{  
                    title: "活动1",  
                    content: "等待上线~",  
                    img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"  
                },  
                {  
                    title: "活动2",  
                    content: "等待上线~",  
                    img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"  
                },  
                {  
                    title: "活动3",  
                    content: "等待上线~",  
                    img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"  
                }  
            ]  
        }  
    },  
    onLoad(e){  
        if(e.data){  
            this.data = e.data;  
        }  
        setTimeout(() => {  
            this.showImg = true;  
        }, 400)  
    },  
    onBackPress() {  
        console.log("点击了返回按钮:new-page页面");  
    },  
    methods: {  
        navigateTo(e) {  
            uni.redirectTo({  
                url: '../huodong/huodong?data=我是活动'+e  
            })  
        }  
        },  

}  
</script>  
<style>  
page {  
    display: flex;  
    min-height: 100%;  
}  
.root {  
    display: flex;  
    flex: 1;  
    flex-direction: column;  
}  
.page-body {  
    flex: 1;  
    display: flex;  
    /* justify-content: center;  
        align-items: center; */  
}  
.uni-media-list-text-top {  
    line-height: 1.6em;  
}  
.uni-media-list-body {  
    height: auto;  
}  
</style>  
hello_uniapp

hello_uniapp - 前端开花

相识的问题,在微信小程序中,打开web-view后 点击小程序的原生导航栏返回键,需要点击2次才能返回到原来的页面,第一次点击返回白屏的页面

mifeng9999

mifeng9999

我也遇到这个问题了怎么一个月了官方也不回复一下呀

k***@qq.com

k***@qq.com

我也遇到了,现在这个问题依然没有解决

9***@qq.com

9***@qq.com

相同的问题,不过真机好像没问题,开发者工具预览是这样的

  • 8***@qq.com

    我遇到的是真机有问题 , iphone7~X 已测试 , 但是官方 demo 真机测试没有问题

    2019-09-06 16:32

  • 8***@qq.com

    我遇到的情况是在小程序中 : 点击左上角 "<" 返回按钮 , 可以返回上一页 , 如果通过手势返回上一页需要划2次

    2019-09-06 16:51

2***@qq.com

2***@qq.com - 80后it男

一个问题,放好久都没人解决,失望,而且问题不是一个人遇到

  • 8***@qq.com

    去微信开放社区找答案

    2019-10-15 16:15

9***@qq.com

9***@qq.com

相同的问题,不过真机好像没问题,开发者工具预览是这样的

1***@qq.com

1***@qq.com

我最近也遇到了这个问题,暂时是通过监听页面返回,然后返回两级页面解决了,不过返回的时候明显有点卡,希望有大佬有更好的方法

onBackPress(e) {  
            uni.navigateBack({  
                delta: 2  
            });  
        },
1***@qq.com

1***@qq.com

            //返回按钮  
    onBackPress(e) {  
        const type = uni.getSystemInfoSync().uniPlatform;  
        if (type == 'app') {  
            //放开右侧按钮  
            /* 获取屏幕信息 */  
            //手机端关闭所有webview页面  
            let webView = this.$scope.$getAppWebview();;  
            webView.close()  

        }  
        //放对应的路径  
        uni.switchTab({  
            url: '/',  
            success(res) {  
                console.log(res);  
            },  
            fail(err) {  
                console.log(err);  
            }  
        });  

    }
4***@qq.com

4***@qq.com - 鸿蒙开发

遇到同样问题了,有解决方案吗

要回复问题请先登录注册