在写移动端页面时碰到一个问题,设计图给的是这样的

设计图_20201116153430.png

如图,上面是一个块,分成四个,按设计图的意思是如果有数据可以往后面添加,并且每两个平行的为一组有一个底边框。
一开始也没想那么多,上手写的时候却发现了问题。后端给我的接口数据肯定是一个数组,不会像图片上给的二位数据,如果是二位数据的话,我就可以循环两次,每两个一组,直接下面给一个 border-bottom 就可以,但现实可没这么简单,问题是都是一位数组,所以说都是一次循环得出来的 DOM 是不可以做底部边框处理的。

下面是思考,可不可以设置特定 css 的项,给定一个底边框。假定,如果数据是单数,那么我们选择的伪类就应该这样写 &:nth-child(odd):nth-last-child(1) ,选择单数的时候在选择 DOM 的最后一个,然后我们继续给定选择的伪类 &:nth-child(even):nth-last-of-type(-n+2) ,选择双数的时候再选择 DOM 的最后两个。
理论上,上面的代码应该是没有问题的,但写出来发现出错了。
发现当我们出现有三条数据的时候,样式错位了。如下图:

代码图_20201116155040.png

尝试修改了一下,换了单双数的写法,把单数设置成最后两个,双数设置成最后一个,发现成功了。

代码图2_20201116155612.png

最后的代码:

<div class="list-item" v-for="(picture, index) in componentData.pictures">
  <div class="list-content">
    <div class="list-wrap">
      <div class="list-tit">{{picture.title}}</div>
      <div class="list-des" :style="{ fontSize: componentData.style.descFontSize }">{{picture.desc}}</div>
    </div>
    <div class="list-img">
      <img class="img" :src="picture.src" />
    </div>
  </div>
</div>

.list-item
  padding: 15px 0
  border-bottom: 1px solid #f1f1f1
  &:nth-child(odd):nth-last-of-type(-n+2)
    border-bottom: none
  &:nth-child(even):nth-last-child(1)
    border-bottom: none
    .list-content
      &:before
        content: none
  &:last-child
    .list-content
      &:before
        content: none
    .list-content
      display: flex
      position: relative
      &:before
        content: ''
        position: absolute
        top: 0
        right: -15px
        width: 1px
        height: 100%
        background-color: #f1f1f1
      .list-img
        > img 
          display: block
          border-radius: 50%
      .list-wrap
        flex: 1
        padding-right: 10px
        .list-tit
          line-height: 1.2
          font-size: 14px
          ellipsis-line(1)
        .list-des
          margin-top: 5px
          color: #999999
          font-size: 12px
          line-height: 1.2
          ellipsis-line(2)

- THE END -

css # 348 阅读
分享到:
Like

目录

    评论 (0)

    • 昵称
    • 邮箱
    • 网址