CSS：微信小程序实现一个列表，一行放两个元素，每两个元素后面加分割线，最后一行后面不加分割线

最新推荐文章于 2024-05-29 10:53:24 发布

奶绿走糖

最新推荐文章于 2024-05-29 10:53:24 发布

阅读量2.2k

点赞数

分类专栏： css wxml 文章标签： css 微信小程序 css3

本文链接：https://blog.csdn.net/ljtjianting/article/details/121955752

版权

css 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

wxml

2 篇文章 0 订阅

订阅专栏

一、实现效果

效果图

二、HTML

<view class="videoList">
    <view class="video-item" wx:for="{{videoList}}" wx:key="item.id" bindtap="toDetail">
      <!-- item内容（可忽略） start-->
      <view class="imgBox">
        <image class="img" src="../../images/common/icon-user.png" />
        <view class="duration">
          <image class="duration-icon" src="../../images/common/triangle-white.png" />
          <view class="duration-txt">{{item.duration}}</view>
        </view>
      </view>
      <view class="video-detail">
        <text class="detail-title">{{item.title}}</text>
        <view class="detail-showed">
          <image class="showed" src="../../images/common/videoShowed.png" />
          <text class="time-txt">{{item.showed}}</text>
        </view>
      </view>
      <!-- item内容（可忽略） end-->
      <!-- 分割线（重点） start-->
      <view class="{{index%2 === 0 && videoList.length-index !== 2 && videoList.length-index !== 1? 'hasLine': 'noLine'}}"></view>
      <!-- 分割线（重点） end）-->
    </view>
</view>

三、CSS

.videoList{
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-between;
}
.video-item:nth-child(even){
  margin-right: 30rpx;
}
.video-item{
  width: 330rpx;
  padding-top: 24rpx;
  margin-left: 30rpx;
}
.hasLine{
  width: 750rpx;
  height: 2rpx;
  border-top: 2rpx solid #e4e4e4;
  left: -30rpx;
  position: relative;
}
.noLine{
  display: none;
}