time line 的制作

<bar title='专题列表'></bar>
<view class='pageContent' style="padding-top:{{statusBarHeight}}px">
	<view class="timeline">
		<block wx:for="{{subjectList}}" wx:for-item="timeItem" wx:for-index="timeIndex" wx:key="timeIndex">
			<view class="timeline-item">
				<view class="header">
					<view class="subject-node"></view>
					<view class="subject-time">{{timeIndex}}</view>
				</view>
				<view class="content">
					<block wx:for="{{timeItem}}" wx:for-item="subItem" wx:for-index="subIndex" wx:key="subIndex">
						<view class="subject-img" catchtap="toSubjectDetail" data-id="{{subItem.id}}">
							<image mode="widthFix" src="{{subItem.bannerUrl}}"></image>
						</view>
					</block>
				</view>
			</view>
		</block>
	</view>
	<view class='subject-end' wx:if="{{!subjectList.length && (pageNo == pageTotal)}}">
    <view class="text-bar"></view>
    <view class="text">已显示全部内容</view>
    <view class="text-bar"></view>
  </view>
</view>

css

• .timeline {
    overflow: hidden;
    padding: 30rpx 30rpx 0 30rpx;
  }
  
  .timeline-item .header {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }
  
  .timeline-item .header .subject-node {
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    margin-right: 30rpx;
    background: #E2E2E2;
  }
  
  .timeline-item .header .subject-time {
    line-height: 30rpx;
    font-size: 22rpx;
    color: #8E8E8E;
  }
  
  .timeline-item .content {
    border-left: 2rpx solid #E2E2E2;
    margin-left: 8rpx;
    padding-left: 38rpx;
  }
  
  .timeline-item .content .subject-img {
    width: 100%;
    margin: 20rpx 0;
  }
  
  .subject-end {
    display: flex;
    align-items: center;
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 30rpx;
  }
  
  .subject-end .text {
    width: 210rpx;
    font-size: 24rpx;
    color: #8e8e8e;
    text-align: center;
  }
  
  .subject-end .text-bar {
    flex: 1;
    height: 2rpx;
    background: #e2e2e2;
  }

  

来源：oschina

链接：https://my.oschina.net/u/4004801/blog/4292252