微信小程序如何实现时间轴功能示例教程？

本文共计940个文字，预计阅读时间需要4分钟。

本文实例讲述了微信小程序实现时间轴的方法。分享给家长供参考，具体如下：

最近项目需要在页面上做一个时间轴，这是第一次做，且是在小程序上。要知道小程序中并没有时间轴这个组件，所以需要自定义实现。

首先，我们需要在页面的WXML中定义一个容器，用于展示时间轴的内容。然后，在WXSS中设置容器的样式，使其呈现出时间轴的视觉效果。

接着，在页面的JS中，我们需要定义一个数组，用于存储时间轴上的各个时间点及其对应的内容。数组中的每个元素都包含两个属性：time（时间点）和content（内容）。

在页面的JS中，我们还需要定义一个函数，用于渲染时间轴。这个函数会遍历数组中的每个元素，并使用WXML中的模板来生成时间轴上的每个节点。

最后，在页面的JS中，我们需要调用渲染函数，并将渲染结果赋值给页面的data属性，使其在页面上显示出来。

具体实现如下：

WXML： {{item.content}}

WXSS：css.timeline { position: relative; padding: 20px;}

.timeline-item { position: relative; padding: 10px; border-left: 2px solid #333;}

.timeline-dot { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; background-color: #333; border-radius: 50%; transform: translateY(-50%);}

.timeline-content { margin-left: 20px;}

JS：javascriptPage({ data: { timeline: [ { time: '2021-01-01', content: '事件1' }, { time: '2021-02-01', content: '事件2' }, // ...其他时间点 ] }, onLoad: function () { this.renderTimeline(); }, renderTimeline: function () { var timeline=this.data.timeline; var=''; for (var i=0; i

以上就是在微信小程序中实现时间轴的方法。希望对您有所帮助。

本文实例讲述了微信小程序时间轴实现方法。分享给大家供大家参考，具体如下：

最近项目需要在页面上做一个时间轴，又是第一次做，而且还是在小程序上，要知道小程序里面没有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> </block> </view>

wxss:

.weui-cell-third{ background: #fff; } .weui-cell-list{ background: #fff; margin: 5px 50px 5px 50px; } .weui-cell-line{ /* width: 100px; */ margin-left: 5px; border-left: 1px solid #ddd; height: 100px; background: #fff } .weui-cell-circle{ border: 1px solid #000; border-radius: 5px; width: 10px; height: 10px; border-color: blue; } .weui-cell-time{ /* width: 50px; */ float: left; font-size:14px; padding-left: 15px; width: 72px; } .weui-cell-event{ padding-top: 15px; padding-left: 15px; } .weui-cell-name{ font-size:14px; height:23px; margin-left: 100px; }

js:

Page({ axis:[ { time:'2018-2-15', name:'张三', event:'垃圾太多' }, { time: '2018-2-15', name: '王三', event: '垃圾太多' }, { time: '2018-2-15', name: '张三', event: '垃圾太多' }, { time: '2018-2-15', name: '张三', event: '垃圾太多' }, ] });

再看页面，已经出来了，是不是很简单

希望本文所述对大家微信小程序开发有所帮助。