小程序时间轴的实现

 时间:2026-04-22 03:41:22

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快速通关攻略
  • 如何制作千张卷油条
  • 缓解嗓子疼的十个小妙招
  • 热门搜索
    艾滋病怎么检查 银项链变黑怎么清洗 怎么查电脑ip地址 我的世界盔甲架怎么做 附件囊肿是怎么形成的 苹果手机微信聊天记录怎么恢复 为什么会长黄褐斑 繁体字怎么写 清汤火锅做法 凫怎么读