自己实现一个时间轴-Taro小程序相关

一个时间轴。

最近在做项目的时候，遇到了物流展示时间轴，记录一下吼吼吼

taro—ui本身给我们提供了时间轴taroUI官方文档-时间轴，

但素个人用起来taroui始终有些不灵活，于是乎自己手码，

数据是动态渲染的，为了方便复用，看得更清楚。只贴了一小段代码，

flex+100%布局；小圆点是我拿css画出来的。

想加icon图标也是同样的道理。

     <View className='ys-list' key='logistic'>
          <View className='des-time'>
            <Text className=''>{day}</Text>
            <Text className=''>{dayTime}</Text>
          </View>
          <View className='des-mes'>
            <View className='list-dot'>
              <View className='dot' />
            </View>
            <Text className=''>{list.content}</Text>
          </View>
     </View>

这里使用的是scss：

    .ys-list {
      width: 100%;
      display: flex;
      flex-direction: row;
      .des-time {
        width: 10%;
        font-size: 22px;
        display: flex;
        flex-direction: column;
        text-align: right;
        padding-right: 40px;
        color: #888888;
      }
      .des-mes {
        border-left: 2px solid #e6e6e6;
        padding-left: 40px;
        width: 80%;
        display: flex;
        flex-direction: column;
        font-size: 26px;
        position: relative;
        padding-bottom: 80px;
        .list-dot {
          width: 48px;
          height: 48px;
          line-height: 48px;
          position: absolute;
          top: -9px;
          left: -24px;
          display: flex;
          align-items: center;
          justify-content: center;
          .dot {
            width: 15px;
            height: 15px;
            border-radius: 100%;
            background-color: #dddddd;
          }
        }
      }
    }