微信小程序Timeline 时间线

微信小程序Timeline 时间线
仿ElementUI的Timeline 时间线，自适应页面与文本
效果图：

wxml代码：

<view class="status-alarm">
    <view class="line-row" wx:for="{{lineArr}}" wx:key="index">
        <view class="onedot {{index===0?'dotS':''}}"></view>
        <view wx:if="{{index!=lineArr.length-1}}" class="oneline"></view>
        <view wx:else class="oneline oneline1"></view>
        <view class="maintext {{index===0?'maintextS':''}}">
            <text>{{item.name}}</text>
            <text wx:if="{{item.time}}">{{item.time}}</text>
            <text wx:if="{{item.title}}" >{{item.title}}</text>
        </view>
    </view>
</view>

wxss代码：

page{
  width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20rpx 20rpx 0 20rpx;
    background-color: #F5F6F7;

}
.status-alarm {
  width: 100%;
  background: #ffffff;
  border-radius: 18rpx;
  box-sizing: border-box;
  padding: 40rpx 4% 30rpx;
}
.line-row {
  position: relative;
  box-sizing: border-box;
  padding-bottom: 40rpx;
}
.line-row:nth-last-child(1) {
  padding-bottom: 0rpx;
}
.onedot {
  left: 20rpx;
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  border: 1rpx solid #D8D8D8;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.onedot::after {
  content: '';
  top: 5rpx;
  left: 5rpx;
  width: 20rpx;
  height: 20rpx;
  background: #D5D5D5;
  border-radius: 50%;
}
.dotS {
  border-color: #2674F8;
}
.dotS::after {
  background: #2674F8;
}
.oneline {
  position: absolute;
  left: 33rpx;
  top: 30rpx;
  height: calc(100% - 30rpx);
  border-left: 2px solid #E7E7E7;
}
.oneline1 {
  height: calc(100% - 50rpx);
}
.maintext {
  position: relative;
  box-sizing: border-box;
  padding-left: 85rpx;
  top: -10rpx;
}
.maintext text {
  display: block;
  color: #999999;
  font-size: 28rpx;
}
.maintext text:nth-child(1) {
  margin-bottom: 5rpx;
  color: #000000;
  font-size: 31rpx;
}
.maintextS text {
  color: #2674F8;
}
.maintextS text:nth-child(1) {
  color: #2674F8;
}

js代码：

data: {
    lineArr:[
      {name:'待处理'},
      {name:'派单',time:'2022-01-18 18:24:10',title:'派单张三'},
      {name:'产生',time:'2022-01-18 16:23:10',title:'额定电压过大额定电压过大额定电压过大额定电压过大额定电压过大额定电压过大额定电压过大'},
    ]
  },

GitHub下载源码