微信小程序实现不定长文字步骤条+气泡框

1.实现效果

2.实现原理

• flex布局实现左右两列数据

• 气泡弹框+底部margin距离组成一个右边的盒子

  1.气泡弹框:圆角矩形+伪元素三角形
  2.圆形：圆+伪元素实心圆
  3.伪元素线，高度100%

• .最后一个数据用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: '这是第一条数据嘻嘻'
      },
      {
        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.更新！（2022/8/23）

• 当文字超长内容出现圆点与细线之间出现间隙。

原因：

• 之前圆点，细线，文字框的小三角，采用绝对定位，top为百分比，比例与文字的整体高度有关，当文字内容超长，出现偏差。

解决方法：

• 将百分比改为具体的rpx，固定值即可。

修改代码如下：

.right::after {
  content: "";
  position: absolute;
  width: 2rpx;
  background: pink;
  border-radius: 4rpx;
  left: -40rpx;
  height: 100%;
  top: 35rpx;//修改
}
.circle {
  position: absolute;
  width: 29rpx;
  height: 29rpx;
  border: 2rpx solid rgb(255, 192, 203, 0.4);
  border-radius: 50%;
  top: 20rpx;//修改
  left: -54rpx;
  z-index: 99;
  background: #fff;
}
.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;//修改
}

5.写在最后🍒

看完本文如果觉得有用，记得点赞+关注+收藏鸭 🍕

更多小程序相关，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~