如附件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>
4***@qq.com (作者)
没,改用view布局直接写了
2023-05-11 09:46