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

本文介绍了在微信小程序中创建时间轴的步骤,强调了在小程序中无法直接使用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>

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值