效果图
解决前(图片选择框死活不出来)
后
实现步骤
在外面套一个宽高写死的容器:
<view style="width: 400rpx; min-height: 300rpx;">
<uni-file-picker limit="9"></uni-file-picker>
</view>
搞定!
以下是uniapp官方的css,仅供阅读,无需理会
.uni-file-pickerheight {
box-sizing: border-box;
overflow: hidden;
}
.uni-file-picker__container {
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
margin: -5px;
}
.file-picker__box {
height: 0px;
width: 33.3%;
}
.file-picker__box {
position: relative;
width: 33.3%;
height: 0;
padding-top: 33.33%;
box-sizing: border-box;
}
.file-picker__box-content {
border-width: 1px;
border-style: solid;
border-color: rgb(238, 238, 238);
border-radius: 3px;
}
.is-add {
display: flex;
align-items: center;
justify-content: center;
}
.file-picker__box-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5px;
border: 1px #eee solid;
border-radius: 5px;
overflow: hidden;
}
.is-addheight {
display: flex;
align-items: center;
justify-content: center;
}
.icon-addheight {
width: 50px;
height: 5px;
background-color: #f1f1f1;
border-radius: 2px;
}
.rotateheight {
position: absolute;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}