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

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.写在最后

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

java与微信小程序通讯_java与微信小程序实现websocket长连接
本文实例为大家分享了java与微信小程序实现websocket长连接的具体代码,供大家参考,具体内容如下背景: 需要在小程序实现地图固定坐标下实时查看消息 java环境 :tomcat7 jdk1. ...
微信是与服务器长连接,java与微信小程序实现websocket长连接.pdf
java与与微微信信小小程程序序实实现现websocket长长连连接接本文实例为大家分享了j ava与微信小程序实现websocket长连接的具体代码,供大家参考,具体内容下背背景景:: 需要在 ...
微信小程序计算圆周长和面积
微信小程序--计算圆周长和面积一..js文件二..wxml文件三..wxss文件结果展示一..js文件截图代码如下: data: {result:"",intst:& ...
PHP进度条小程序,用微信小程序实现一个圆形的进度条
随着小程序的热度下降,更多的人已经开始静下心来开发微信小程序了,最近在开发一款微信小程序的过程中遇到了一个问题:如何用微信小程序实现一个圆形的进度条?整理一番后,记录下来与大家共享. 代码实现的思路原 ...
微信小程序：2022虎年背景全新UI头像框制作
2021马上就结束了,2022也马上到来了,虎年降至给大家带来一款以2022虎年为主的一款头像制作小程序源码前两天小编也分享过一款虎年头像框的小程序不过那款为了美观,所以就没有给那款小程序添加流 ...
微信小程序：2022虎年背景全新UI头像框制作带安全检测
不知不觉已经2022年了,记得上一次发布这款小程序还在2021 感叹时间过得还是挺快的,为什么小编又要重新发布一次这个小程序呢因为有很多小伙伴说之前的没有安全内容检测,然后审核过不去所以小编今天就 ...
微信小程序隐藏video标签的进度条组件
微信小程序隐藏video标签的进度条组件直接上代码 <video direction="0" show-fullscreen-btn="{{false}}&quo ...
新手入门微信小程序-从注册到开发（校庆头像框）
微信公众号:数学建模与人工智能 GitHub - QInzhengk/Math-Model-and-Machine-Learning 展示效果: 最近从网上找了一个开源的生成和校庆有关的微信头像小程 ...
微信小程序 - 防止容器内文字过长导致溢出（view / text）
前言在微信小程序中,对 view 与 text 均有效,标题文本太长显示不下,能有效控制文字超出. 我们无法预知后端数据有多少,一旦文字超出容器宽度,那么必然会造成界面变形,下面是解决方案. 单行 ...

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

1.实现效果

2.实现原理

3.实现代码

4.更新！（2022/8/23）

原因：

解决方法：

修改代码如下：

5.写在最后

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

最新文章

热门文章

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

1.实现效果

2.实现原理

3.实现代码

4.更新！（2022/8/23）

原因：

解决方法：

修改代码如下：

5.写在最后 insertAdIfNeeded();

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

最新文章

热门文章

5.写在最后