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

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

### 实现微信小程序中的折线图 #### 创建并初始化项目环境 为了在微信小程序中生成折线图,需先建立一个基于微信开发者工具的小程序项目[^1]。 #### 引入 ECharts 库 对于希望集成高质量图表展示功能的应用来说,ECharts 是一种理想的选择。具体而言,在微信小程序环境下应用动态折线图能够提供直观的数据可视化体验[^2]。要使这一目标成为现实,首先应当通过插件市场安装 `uniapp_echarts` 插件来引入 echarts 折线图能力。完成上述操作后,则可以在页面组件内引用该库,并编写相应代码片段以准备后续绘图工作[^3]。 #### 编写绘制折线图的代码逻辑 一旦成功集成了 ECharts 到项目里,就可以着手于实际图形构建了。以下是利用 JavaScript 和 WXML 结合的方式定义了一个简单版本的时间序列折线图实例: ```javascript // js 文件部分 const app = getApp(); Page({ data: { chartData: null, }, onReady() { this.initChart(); }, initChart() { const query = wx.createSelectorQuery().in(this); query.select('#mychart').boundingClientRect((rect) => { if (rect) { let myChart = echarts.init(this.chart, 'light'); let option = { xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: '模拟数据', type: 'line', smooth: true, data: [820, 932, 901, 934, 1290, 1330, 1320], areaStyle: {} }] }; myChart.setOption(option); } }).exec(); } }); ``` ```html <!-- wxml 文件部分 --> <view class="container"> <canvas canvas-id="mychart" id="mychart"></canvas> </view> ``` 此段代码展示了如何设置 X 轴为类别型(即星期几),Y 轴表示数值大小;并通过给定一系列时间点上的测量值得到了一条平滑曲线作为系列的一部分。 #### 获取实时更新的数据源 当涉及到更复杂场景下的动态变化趋势呈现时——例如从服务器端拉取最新统计数据并即时反映在线条走势上——则需要额外考虑 API 请求机制以及响应处理流程的设计[^4]。这通常意味着要在适当位置加入网络请求函数用于抓取外部资源,并确保每次接收到新消息都能触发视图刷新动作从而保持界面同步状态。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值