微信小程序实现步骤条+气泡框

1.实现效果

在这里插入图片描述

2.实现原理

1.flex布局实现左右两列数据
2.气泡弹框+底部margin距离组成一个右边的盒子：{
    1.气泡弹框:圆角矩形+伪元素三角形
    2.圆形：圆+伪元素实心圆
    3.伪元素线，高度100%
}
3.最后一个数据用nth-child()选择器去掉

3.实现代码

<view class="con">
  <block wx:for="{{list}}" wx:key="list">
    <view class="flex">
      <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>

/* pages/cssCase/stepsAnt/index.wxss */
page {
  padding-bottom: 40rpx;
}

.con {
  width: 702rpx;
  background: #FFFFFF;
  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;
}

.time {
  font-size: 24rpx;
  color: #999999;
}

.right {
  flex: 1;
  font-size: 26rpx;
  font-weight: 500;
  line-height: 37rpx;
  color: #333333;
  position: relative;
}

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

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

.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: 15%;
}

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

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

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

// pages/cssCase/stepsAnt/index.js
Page({


  data: {
    list: [
      {
        date: '2021/12/24',
        time: "11:11",
        content: '这是第一条数据嘻嘻'
      },
      {
        date: '2021/12/24',
        time: "11:11",
        content: '这是第2条数据嘻嘻哈哈哈哈哈说的都是多多'
      },
      {
        date: '2021/12/24',
        time: "11:11",
        content: '这是第32条数据嘻嘻哈哈哈哈哈说的都是多多考生复试巅峰计划看电视看粉红色的粉红色的粉红色的发送到'
      },
      {
        date: '2021/12/24',
        time: "11:11",
        content: '这是第4条数据嘻嘻哈哈哈哈哈说的都是多多ediuf dkh d是的柔肤水搜发送到粉红色的接口发就是掉分束带结发和闪电发货都是废话水电费客户'
      },
      {
        date: '2021/12/24',
        time: "11:11",
        content: '这位是司电话费斯柯达粉红色的几句话分时间掉分更合适的发送到看就发烧打几分水电费水电费是的就很烦上岛咖啡水电费水电费收代理费和上岛咖啡和上岛咖啡死得快方式的会计法司电话费可视对讲发说多了几分圣诞快乐分离式的发射基地看凤山街道看了上分'
      },
      {
        date: '2021/12/24',
        time: "11:11",
        content: '这是第5条数据嘻嘻这是第5条数据d这是第5条数据发就是掉分这是第这是第5条数据这是第5条数据这是第5条数据这是第5条数据这是第5条数据这是第5条数据这是第5条数据这是第5条数据电费客户'
      },
    ]
  },
})

4.更多小程序demo，关注苏苏的码云！