公告列表
公告列表
收藏
回答

cover-view的css问题（flex）


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





求解。

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

回答关注问题邀请回答
收藏

9 个回答

  • 黄思程
    黄思程
    2017-10-20

    cover-view默认有white-space:nowrap

    2017-10-20
    有用
    回复
  • 黄思程
    黄思程
    2017-10-20

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

    2017-10-20
    有用
    回复
  • 黄思程
    黄思程
    2017-10-20

    正常是想要怎样的效果

    2017-10-20
    有用
    回复
  • 黄思程
    黄思程
    2017-10-19

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

    2017-10-19
    有用
    回复
  • GaleLiu
    GaleLiu
    2017-10-20

    我想要效果是这种


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

    2017-10-20
    有用
    回复
  • GaleLiu
    GaleLiu
    2017-10-20

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

    2017-10-20
    有用
    回复
  • GaleLiu
    GaleLiu
    2017-10-20

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

    cover-view 他不换行；

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

    2017-10-20
    有用
    回复
  • GaleLiu
    GaleLiu
    2017-10-20

    @黄思程  怎样？

    2017-10-20
    有用
    回复
  • GaleLiu
    GaleLiu
    2017-10-19
    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;
    }

    效果是这样的：


    2017-10-19
    有用
    回复
请 登录 后发表内容
相关问题
相关文档