今日分享-步骤条简易写法代码

1、废话不多说，先看效果

2、实现原理

巧妙应用CSS的一些属性，例如：position 、::after等等

这里演示的是在微信小程序中的建议使用

3、具体实现代码片段

• html【WXML】

<view class="con">
  <block wx:for="{{list}}" wx:key="list">
    <view class="flex con-item">
      <view class="left">
        <view>{{item.date}}</view>
        <view class="time">{{item.time}}</view>
      </view>
      <view class="right">
        <!-- 小圆点 -->
        <view class="circle"></view>
        <view class="r_box">{{item.content}}</view>
      </view>
    </view>
  </block>
</view>

• css【WXSS】

.con {
  width: 702rpx;
  background: #fff;
  border-radius: 20rpx;
  margin: 40rpx auto;
  box-sizing: border-box;
  padding: 37rpx 24rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #4d4d4d;
}

.left {
  width: 130rpx;
  text-align: center;
  line-height: 33rpx;
  margin-right: 60rpx;
  flex-shrink: 0;
}

.left .time {
  color: #999;
}

.right {
  /* 占据剩余宽度 */
  flex: 1;
  font-size: 26rpx;
  font-weight: 500;
  line-height: 37rpx;
  color: #333;
  position: relative;
}

.right::after {
  content: '';
  position: absolute;
  width: 2rpx;
  background: pink;
  border-radius: 4rpx;
  height: 100%;
  left: -40rpx;
  top: 35rpx;
}

.right .circle {
  position: absolute;
  width: 29rpx;
  height: 29rpx;
  border: 2rpx solid rgb(255, 192, 203);
  border-radius: 50%;
  top: 20rpx;
  left: -54rpx;
  z-index: 2;
  background: #fff;
}

.right .circle::after {
  content: '';
  position: absolute;
  width: 15rpx;
  height: 15rpx;
  background: pink;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.r_box {
  width: 453rpx;
  background: #e4c1c1;
  border-radius: 14rpx;
  box-sizing: border-box;
  padding: 16rpx 28rpx 23rpx 29rpx;
  position: relative;
  margin-bottom: 60rpx;
}

.r_box::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 13rpx solid transparent;
  border-bottom: 13rpx solid transparent;
  border-right: 17rpx solid #e4c1c1;
  left: -15rpx;
  top: 20rpx;
}

.con-item:last-child .right .r_box {
  margin-bottom: 0;
}

.con-item:last-child .right::after {
  display: none;
}

• js

Page({
  data: {
    // 内容列表
    list: [
      {
        date: '2021/12/24',
        time: '11:11',
        content: '这是第一条数据'
      },
      {
        date: '2021/12/24',
        time: '11:11',
        content: '这是第二条数据嘻嘻哈哈哈哈哈或哈哈哈哈'
      },
      {
        date: '2021/12/24',
        time: '11:11',
        content: '这是第三条数据嘻嘻哈哈哈哈哈或哈哈哈哈是东方市的发数据库的方式的会计法是京东客服是'
      },
      {
        date: '2021/12/24',
        time: '11:11',
        content: '这是第四条数据嘻嘻哈哈哈哈哈或哈哈哈哈是东方市的发数据库的方式的会计法是京东客服啊哈健康是福和阿是否会上电视机肯定发是兑换积分个是兑换积分是兑换积分说的架子快递费水电费是'
      },
      {
        date: '2021/12/24',
        time: '11:11',
        content: '这是第五条数据嘻嘻哈哈哈哈哈或哈哈哈哈是东方市的发数据库的方式的会计法是京东客服啊哈健康是福和阿是否会上电视机肯定发是兑换积分个是兑换积分是兑换积分说的架子快递费水电费是按数据库发撒考虑到非说的话会计法和山东矿机发和上岛咖啡'
      },
      {
        date: '2021/12/24',
        time: '11:11',
        content: '这是第六条数据嘻嘻哈哈哈哈哈或哈哈哈哈是东方市的发数据库的方式的会计法是京东客服啊哈健康是福和阿是否会上电视机肯定发是兑换积分个是兑换积分是兑换积分说的架子快递费水电嘻哈哈哈哈哈或哈哈哈哈是东方市的发数据库的方式的会计法是京东客服啊哈健康是福和阿是否会上电视机肯定发是兑换积分个是兑换积分是兑换积分说的架子快递费水电嘻哈哈哈哈哈或哈哈哈哈是东方市的发数据库的方式的会计法是京东客服啊哈健康是福和阿是否会上电视机肯定发是兑换积分个是兑换积分是兑换积分说的架子快递费水电费是按数据库发撒考虑到非说的话会计法和山东矿机发和上岛咖啡'
      },
    ]
  },
})

4、实现简单，代码片段复制粘贴，即可预览效果，可应用于微信小程序，H5页面，PC系统的相关定制页面。

最后，贴一下自己的小程序，喜欢可以扫码查看