微信小程序——时间轴的实现

最新推荐文章于 2024-07-15 16:15:28 发布

原创

最新推荐文章于 2024-07-15 16:15:28 发布 · 2.1w 阅读

24 ·

CC 4.0 BY-SA版权

本文介绍了在微信小程序中创建时间轴的步骤，强调了在小程序中无法直接使用ol/ul/li元素，并分享了一种解决方案：通过结合圆圈、直线和内容来构造时间轴。通过展示WXML、WXSS和JS代码片段，展示了如何实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需要在页面上做一个时间轴，又是第一次做，而且还是在小程序上，要知道小程序里面没有ol/ul/li，看了好几个例子，最后做出来了，开心呀！如图：

做起来其实很简单：一个时间轴包括一个圆圈（css实现圆圈或者找一个圆圈图片）+一条线（css实现直线或者找一个直线的图片)+内容

来看我的代码（代码很不规范，请忽略）：

wxml

<view class='weui-cell-third'>
  <view class="page__title">
    <image class='page-image' src="/static/img/1.png" />工作动态</view>
  <block wx:for="{
  
  {axis}}" wx:key="*this">
    <view class='weui-cell-list'>

      <view class='weui-cell-circle'></view>

      <view class='weui-cell-line'>

        <view class='weui-cell-time'>{
  
  {item.time}}</view>
        <view class='weui-cell-name'>{
  
  {item.name}}</view>
        <view class='weui-cell-event'>{
  
  {item.event}}</view>
      </view>

    </view>