4***@qq.com
4***@qq.com
  • 发布:2023-04-22 09:12
  • 更新:2023-04-26 13:59
  • 阅读:570

在uni-popup嵌套uni-grid,运行在h5下没问题,在小程序会出现渲染错误问题

分类:uni-app

如附件2所示,在uni-popup嵌套uni-grid,运行在h5下没问题,在小程序会出现渲染错误问题,相关代码如下:

复制代码<template>  
    <view>  
        <uni-popup ref="popmenu" background-color="#fff" type="top" style="margin: 0;">  
            <view class="popmenu-content" style="display: block;">  
                <uni-grid :column="4" :highlight="true" >  
                    <uni-grid-item :index="0">  
                        <view class="grid-item-box">  
                            <image class="imgCss" mode="scaleToFill" src="@/static/index/jingpinxianlu.png">  
                            </image>  
                            <text class="secondtext poptext">精品线路</text>  
                        </view>  
                    </uni-grid-item>  
                    <uni-grid-item :index="1">  
                        <view class="grid-item-box">  
                            <image class="imgCss" mode="scaleToFill" src="@/static/index/minsukezhan.png">  
                            </image>  
                            <text class="secondtext poptext">民宿客栈</text>  
                        </view>  
                    </uni-grid-item>  
                    <uni-grid-item :index="2">  
                        <view class="grid-item-box">  
                            <image class="imgCss" mode="scaleToFill" src="@/static/index/nongjiale.png">  
                            </image>  
                            <text class="secondtext poptext">农家乐</text>  
                        </view>  
                    </uni-grid-item>  
                    <uni-grid-item :index="3">  
                        <view class="grid-item-box">  
                            <image class="imgCss" mode="scaleToFill" src="@/static/index/tianqichaxun.png">  
                            </image>  
                            <text class="secondtext poptext">天气查询</text>  
                        </view>  
                    </uni-grid-item>  

                </uni-grid>  
                <button type="default" plain="true"  
                    style="margin-top: 2em;border: 1px solid #66c55d;color:#66c55d; background:   
    rgba(102,197,93,0.05);"  
                    @click="closePopMenu">关闭</button>  
            </view>  
        </uni-popup>  

    </view>  
</template>  
<style>  
.topImage {  
        border-radius: 1em;  
        width: 40vw;  
        height: 15vh;  
    }  
    .uni-column {  
        padding-top: 2em;  
    }  

    .uni-column:last-child {  
        padding-bottom: 5em !important;  
    }  
    .flex-item-V {  
        width: 100%;  
        /*  height: 150rpx;  
        line-height: 150rpx; */  
        text-align: center;  

    }  
    .desClass {  
        font-weight: bold !important;  
        color: #000000 !important;  
        margin-top: 0 !important;  

    }  

    .secondImg {  
        width: 20vw;  
        height: 20vw;  
        border-radius: 1em;  
    }  
    .text {  
        font-size: 14px;  
        margin-top: 5px;  
    }  
    .text {  
        margin: 15rpx 10rpx;  
        padding: 0 20rpx;  
        /* background-color: #ebebeb; */  
        height: 70rpx;  
        line-height: 70rpx;  
        text-align: center;  
        color: #777;  
        font-size: 26rpx;  
    }  

    .secondtext {  

        height: 50rpx;  
        line-height: 50rpx;  
        text-align: center;  
        color: white;  
        font-size: .5em;  
    }  
    .poptext {  
        color: #555;  
    }  
    >>>.uni-grid-item--border {  
        border: none !important;  
    }  
    >>>.uni-grid--border {  
        border: none !important;  
    }  
    .grid-item-box {  
        flex: 1;  
        // position: relative;  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
        /* padding: 15px 0; */  
    }  

    .grid-item-box-row {  
        flex: 1;  
        // position: relative;  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: row;  
        align-items: center;  
        justify-content: center;  
        padding: 15px 0;  
    }  
</style>  
2023-04-22 09:12 负责人:无 分享
已邀请:
1***@163.com

1***@163.com

我也遇到这个问题了 你解决了吗?

  • 4***@qq.com (作者)

    没,改用view布局直接写了

    2023-05-11 09:46

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容