微信小程序-时间轴样式实现

最新推荐文章于 2023-05-31 16:59:53 发布

森海北屿 ღ

最新推荐文章于 2023-05-31 16:59:53 发布

阅读量957

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_42968609/article/details/115030367

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现效果：
在这里插入图片描述

wxml代码：

<view class='history_con'>
  <block wx:for="{{historyTodayData}}" wx:key="year" data-index="{{index}}">
    <view class='history_item_list'>
      <text class="iconfont icon-timefill "></text>
      <view class='histor_item {{index==historyTodayData.length-1?"last":""}}'>
        <view class='histor_item_year'>{{item.year}}年</view>
        <view class='histor_item_tit'>{{item.title}}</view>
      </view>
    </view> 
  </block>
</view>

historyTodayData实际为所需展示的数据，结构为对象数组。时间轴样式主要通过定位实现，轴线实际为border-left实现，为完美展示需要对最后一个元素做特殊处理，因此通过判断 index==historyTodayData.length-1 时动态添加类名，不显示border。

wxss代码：

page{
  background: #f0f2f5;
}
.history_con{
  padding:16px;
}
.history_item_list{
  padding-left: 80px;
  padding-right: 24px;
  font-size:14px;
  color:#666;
}
.iconfont{
  color:#409eff94;
}
.histor_item{
  border-left: 1px solid #409eff94;
  height: 80px; 
  margin:-6px 0 -6px 7px;
  position: relative;
}
.last{
  border:none;
  height: 32px;
}
.histor_item_year{
  position: absolute;
  left: -66px;
  top: -18px;
}
.histor_item_tit{
  position: absolute;
  top: -18px;
  left: 32px;
}