微信小程序物流状态时间轴开发步骤

2023-10-25 01:04:21

现在我们可以在微信小程序中开发一个物流状态时间轴，下面是开发步骤：

在父级容器中设置绝对定位（记得父级要设置相对定位哈），然后自己调位置，这是为了确保子级容器能够正确显示在父级容器中。
在中间子级容器中放三个子容器（设置时间轴线、点的样式），这三个子容器分别是时间轴线、点和文本。时间轴线是一条水平线，连接了所有的点。点是圆形，表示物流状态。文本是每个物流状态的。
在右边的子级容器中设置宽度和高度，并设置背景颜色。这个子级容器是物流状态的详细信息区域。
在JavaScript文件中，根据物流状态的数据动态生成时间轴线、点和文本。
在样式文件中，设置时间轴线、点和文本的样式。
运行小程序，测试物流状态时间轴是否正常显示。

代码示例

// 在JavaScript文件中，根据物流状态的数据动态生成时间轴线、点和文本
const app = {
  data: {
    logisticsStatus: [
      {
        time: '2023-01-01 00:00:00',
        status: '已发货',
      },
      {
        time: '2023-01-02 00:00:00',
        status: '运输中',
      },
      {
        time: '2023-01-03 00:00:00',
        status: '已签收',
      },
    ],
  },
  onLoad: function () {
    // 获取父级容器的宽度
    const parentWidth = wx.getSystemInfo().windowWidth;

    // 动态生成时间轴线、点和文本
    let logisticsStatus = this.data.logisticsStatus;
    let logisticsTimeline = '';
    for (let i = 0; i < logisticsStatus.length; i++) {
      let logisticsStatusItem = logisticsStatus[i];

      // 时间轴线
      logisticsTimeline += '<view class="timeline-line"></view>';

      // 点
      logisticsTimeline += '<view class="timeline-dot"></view>';

      // 文本
      logisticsTimeline += `<view class="timeline-text">${logisticsStatusItem.time} ${logisticsStatusItem.status}</view>`;
    }

    // 设置父级容器的宽度
    this.setData({
      parentWidth: parentWidth,
      logisticsTimeline: logisticsTimeline,
    });
  },
};

// 运行小程序
App(app);