WXOPEN Club

cover-view的css问题（flex）

发布于 6 年前作者 songyong16120 次浏览最后编辑 6 年前来自 ask

即便去掉cover-view本身的换行样式也不行

求解。

(发帖的标签应该包含所有组件名吧，找都找不到)

9 回复
jing16
jing161 楼6 年前

想要的效果是会换行的，大概一行3个。

cover-view 他不换行；

如果换成  view  标签就是我要的效果，当然这只能工具上显示。

fangfu
fangfu2 楼6 年前

你好，麻烦提供下完整的代码示例

taoyu
taoyu3 楼6 年前

我想要效果是这种

这效果仅仅是把 cover-view 换成 view 标签

yinxia
yinxia4 楼6 年前

不是平台问题，我在想是不是这个组件cover-view与flex不兼容

huangxiulan
huangxiulan5 楼6 年前

还有在什么平台上有问题？

bcheng
bcheng6 楼6 年前

@黄思程  怎样？

icao
icao7 楼6 年前

cover-view默认有white-space:nowrap

fang72
fang728 楼6 年前

正常是想要怎样的效果

ycai
ycai9 楼4 年前

wxml (map组件里面)

<cover-view class="users" wx:if='{{debug}}'>
  <cover-view class='users-title'>请选择你的她</cover-view>
  <cover-view class="user-list">
    <cover-view class="user-item">
      <cover-image class='img' src='http://qnimg.pianke.me/5fb30002fce3d35b415f715dda88344820171011.jpg?imageView2/2/w/300/format/jpg'></cover-image>
      <cover-view>无敌是多么寂寞</cover-view>
    </cover-view>
    <cover-view class="user-item">
      <cover-image class='img' src='http://qnimg.pianke.me/5fb30002fce3d35b415f715dda88344820171011.jpg?imageView2/2/w/300/format/jpg'></cover-image>
      <cover-view>无敌是多么寂寞</cover-view>
    </cover-view>
    <cover-view class="user-item">
      <cover-image class='img' src='http://qnimg.pianke.me/5fb30002fce3d35b415f715dda88344820171011.jpg?imageView2/2/w/300/format/jpg'></cover-image>
      <cover-view>无敌是多么寂寞</cover-view>
    </cover-view>
    //...省略多个
  </cover-view>
</cover-view>

wxss

.users{
  width: 70%;
  height: 300rpx;
  background-color: rgba(136,136,136,0.7);
  position: absolute;
  left: 15%;
  top:30%;
  font-size: 25rpx;
}
 
.users-title{
  width: 100%;
  color: white;
  margin: 6rpx 0;
  text-align: center;
}
 
.user-list{
  width: 100%;
  margin: 6rpx;
  display: flex;
  flex-wrap: wrap;
}
 
.user-item{
  width: 30%;
  color: white;
}

效果是这样的：