uni-app 钉钉小程序cover-view标签无效

uni-app 钉钉小程序cover-view标签无效

示例代码:

<template>  
    <view>  
        <page-head title="cover-view用于覆盖map、video等原生组件"></page-head>  
        <view class="cover-content" v-if="showMap">  
            <!-- TODO暂时条件编译解决支付宝小程序不能正常显示 cover-x -->  
            <!-- #ifdef APP-PLUS -->  
            <map>  
                <cover-view class="cover-view">简单的cover-view.vue</cover-view>  
                <cover-image class="cover-image" src="/static/uni.png"></cover-image>  
            </map>  
            <!-- #endif -->  

            <!-- #ifndef APP-PLUS -->  
            <!-- #ifndef MP-QQ -->  
            <map></map>  
            <!-- #endif -->  

            <!-- TODO QQ暂不支持地图组件 -->  
            <!-- #ifdef MP-QQ -->  
            <video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"></video>  
            <!-- #endif -->  

            <cover-view class="cover-view">简单的cover-view</cover-view>  
            <!-- #ifndef MP-QQ -->  
            <cover-image class="cover-image" src="/static/uni.png"></cover-image>  
            <!-- #endif -->  
            <!-- #endif -->  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                showMap: false  
            };  
        },  
        onLoad() {  
      // #ifdef APP-PLUS || MP-BAIDU  
            setTimeout(()=>{  
                this.showMap = true  
            },350)  
      // #endif  
      // #ifndef APP-PLUS || MP-BAIDU  
            this.showMap = true  
      // #endif  
        }  
    }  
</script>  

<style>  
    map {  
        width: 750rpx;  
        width: 100%;  
        height: 600px;  
    }  

    .video {  
        width: 100%;  
    }  

    .cover-content {  
        position: relative;  
    }  

    .cover-view {  
        position: absolute;  
        left: 5px;  
        top: 5px;  
        width: 375rpx;  
        text-align: center;  
        background-color: #DDDDDD;  
    }  

    .cover-image {  
        position: absolute;  
        left: 0;  
        top: 0;  
        right: 0;  
        bottom: 0;  
        margin: auto;  
        width: 96px;  
        height: 96px;  
    }  
</style>  

操作步骤:

Hello uni-app 直接运行到小程序模拟器(支付宝小程序开发者)
选择 钉钉 》 企业内部应用

预期结果:

<cover-view class="cover-view">简单的cover-view</cover-view>
显示在地图组件上面

实际结果:

模拟器:
<cover-view>元素不存在,请检查你的代码
真机调试:
“简单的cover-view”出现在最底部

bug描述:

使用Hello uni-app演示框架中的【内置组件】》【视图容器】》【cover-view】
信息类别 信息内容
产品分类 uniapp/小程序/阿里
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Microsoft Windows [版本 10.0.19042.746]
HBuilderX类型 正式
HBuilderX版本号 3.1.2
第三方开发者工具版本号 1.17.9
基础库版本号 1.24.8
项目创建方式 HBuilderX

Image Image Image


更多关于uni-app 钉钉小程序cover-view标签无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

应该是支付宝小程序模拟器的bug,建议以真机为主。

更多关于uni-app 钉钉小程序cover-view标签无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


第二第三张截图是真机测试,还请验证,谢谢

? 是否是BUG? 还请帮忙确认下,还等着项目发布呢/(ㄒoㄒ)/~~

同样遇到cover-view和cover-image在钉钉小程序中失效

在钉钉小程序中,cover-view 必须作为 mapvideo 等原生组件的直接子元素才能正确显示。根据你的代码,钉钉小程序平台下的 cover-view 被放在了 map 外部,这会导致其无法覆盖在原生组件之上。

请修改条件编译部分,确保在钉钉小程序中 cover-view 直接嵌套在 map 内部:

<!-- #ifndef APP-PLUS -->
<map>
  <cover-view class="cover-view">简单的cover-view</cover-view>
  <!-- #ifndef MP-QQ -->
  <cover-image class="cover-image" src="/static/uni.png"></cover-image>
  <!-- #endif -->
</map>
<!-- #endif -->
回到顶部