小程序时间线

柔光的暖阳◎ 2021-11-17 07:08 270阅读 0赞

效果：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

wxml
    
    <view class='weui-cell-third'>
      <view class="page__title">
        <view>
          全球运营论坛——全球智慧 对话新时代
        </view>
        <view>
          时间: 09:00-21:40 地点:会场A
        </view>
      </view>
      <view class="wecentBor">
        <block wx:for="{
       {axis}}" wx:key="*this">
          <view class='weui-cell-list'>
            <view class='weui-cell-line'>
              <view class='weui-cell-circle'>
              <view></view>
              </view>
              <view class='weui-cell-time floarLeft'>{
       {item.time}}</view>
              <view class='weui-cell-event floarLeft'>{
       {item.event}}</view>
            </view>
          </view>
        </block>
      </view>
    </view>

wxss
    
    page{height: 100%;}
    .weui-cell-third{min-height: 100%;background-color: #f0f0f0;}
    .page__title{padding: 30rpx;background-color: #ffffff;margin-bottom: 10rpx;}
    .page__title>view:first-child{text-align: center;font-size: 35rpx;color: #2fb69d;font-weight: 700;}
    .page__title>view:last-child{display: flex;justify-content: center;align-items: center;padding-top: 30rpx;color: #999999;}
    .weui-cell-list{
     padding: 0 30rpx;overflow: hidden;
    }
    .wecentBor{padding-top: 40rpx; background: #fff;}
    .weui-cell-line{
    margin-left: 5px;
    float: left;
     border-left: 1px solid #2fb69d;
     min-height: 100rpx;
    margin-bottom: -10px;
    position: relative;
    }
    .weui-cell-list:first-child .weui-cell-circle{ border: 1px solid #2fb69d;}
    .weui-cell-list .weui-cell-circle{
     position: absolute;
     left: -10px;top: 0px;
     background-color: #ffffff;
     width: 20px;height: 20px;
     border: 0;
     border-radius: 10px;
     display: flex;justify-content: center;align-items: center;
    }
    .weui-cell-circle>view{
     border: 1px solid #2fb69d;
     border-radius: 5px;
     width: 10px;
     height: 10px;
     background-color: #2fb69d;
     border-color: 2fb69d;}
    .weui-cell-time{
     float: left;
     font-size:14px;
     padding-left: 15px;
     width: 200rpx;}
    .weui-cell-event{padding-left: 20rpx;width: calc(100% - 200rpx);padding-bottom: 40rpx;}
    .weui-cell-list:last-child .weui-cell-line{border: 0;}

data: {
        axis: [
          {
            time: '08:30-10:00',
            event: '垃圾太多'
          },
          {
            time: '10:00-11:00',
            event: '垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多111'
          },
          {
            time: '11:00-12:00',
            event: '垃圾太多'
          },
          {
            time: '12:00-13:00',
            event: '垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多222'
          },
          {
            time: '13:00-14:00',
            event: '垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多333'
          },
          {
            time: '14:-16:00',
            event: '垃圾太多'
          },
          {
            time: '16:00-17:00',
            event: '垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多垃圾太多444'
          }
        ]
      },

可能是觉得参考的这里例子、时间轴和时间标题没有对齐、所以稍微修改了一下、下面是原文链接、可以去看看。

参考网址：[https://www.w3xue.com/exp/article/20191/17770.html][https_www.w3xue.com_exp_article_20191_17770.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20211116/597364b0ea5742af9b003e304475105b.png
[https_www.w3xue.com_exp_article_20191_17770.html]: https://www.w3xue.com/exp/article/20191/17770.html