小程序时间轴的实现

 时间:2026-02-14 14:34:56

1、最终实现的展示效果图如下,左侧为时间节点,中间为线条,右边为头像。

小程序时间轴的实现

2、wxml的具体实现如下:

小程序时间轴的实现

3、在列表中的view中利用wx:for进行列表配置,在最底层的cell的view上放置三个view,分别放置时间,点和图片的view,wxss中会进行设置。

小程序时间轴的实现

4、时间线单独使用view,只是绝对定位设置left的形式实现。

小程序时间轴的实现

5、wxss的具体实现,列表中采用flex弹性盒子的实现方式设置中间view的对齐方式,线条的实现采用absolute+left方式设置,如下图:

小程序时间轴的实现

小程序时间轴的实现

小程序时间轴的实现

小程序时间轴的实现

小程序时间轴的实现

6、js里面的数据初始化如下,arrData为数据源。

小程序时间轴的实现

  • 百度翻译app如何关闭中文拼音注释功能?
  • 青花椒辣卤汁毛豆
  • icopark快速通关攻略
  • 如何制作千张卷油条
  • 缓解嗓子疼的十个小妙招
  • 热门搜索
    青海省会是哪里 如何恢复删除的微信聊天记录 股票基本面怎么看 赛艇运动起源于哪里 奔驰c180怎么样 ps如何快速抠图 天水旅游景点大全 浙江旅游路线 经常中暑怎么办 如何做披萨