本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

接到新需求，需要批量创建物流信息，类似于快递的物流进度信息，从网上找了搜了好多插件，还是想考验一下自己原生js的能力（忘干净了...）

数据结构

物流数据是后端返回，经过处理的（xx仓库中转、时间节点等）

var addrs = [    {addr:'快递员揽收',createTime:'2022/1/19'},    {addr:'上海仓库中转',createTime:'2022/1/19'},    {addr:'河南仓库发货',createTime:'2022/1/20'},    {addr:'南京仓库入库',createTime:'2022/1/20'},    {addr:'澳门物流中心中转',createTime:'2022/1/20'},]

物流信息界面

物流信息有很多，所以要用 wx:for进行循环渲染

<view class="ccxx_btm_item" wx:for="{{addrs}}" wx:for-item="item" wx:key="index"></view>

物流信息单个模块

先画一条进度线，效果图如下：

因为是批量渲染所以找一个位置固定好即可；

圆点需要定位在进度线顶部，要先给线加上 position：relative

.playlog-item .dotline {
  width: 35px;
  position: relative;
}

/*竖线*/

.playlog-item .dotline .line {
  width: 1px;
  height: 100%;
  background: #D3DDFF;
  position: absolute;
  top: 15px;
  left: 15px;
}

/*圆点*/
.playlog-item .dotline .dot .dotMin{
  width: 8px;
  height: 8px;
  background: #2D59E6;
  position: absolute;
  top: 3px;
  left: 4px;
  border-radius: 50%;
}

渲染物流信息

物流信息是放在竖线的右侧，flex-direction: column;竖向展示；margin设置下边距（要不会很丑）

width: 100%;
display: flex;
flex-direction: column;
margin: 7rpx 0 7rpx 10rpx;

<view class="content">
    <text class="time">{{item.createTime}}</text>
    <text class="course">{{item.addr || 'N/A'}}</text>
</view>

展开和收回按钮

物流信息太多的话，会非常占用页面空间，不是很美观。要加上展开或者收回按钮 allActive为动态展示 展开和收回

<view bindtap="onAll" class="onAll" wx:if="{{adcs.length >=5}}">
  <text>{{allActive}}</text>
</view>

要给物流信息的view一个具体高度，物流信息超过5条就可以把这个按钮显示，我这里给的是364rpx

<view style="{{isAll ? 'height: 364rpx;overflow: hidden;' :''}}"></view>

判断点击和收回，要有一个flags状态来进行判断 isAll为当前的状态 分别为 true和false

  onAll() {
    if (this.data.isAll) {
      this.setData({
        allActive: '收回',
        isAll: false,
      })
    } else {
      this.setData({
        allActive: '展开更多',
        isAll: true,
      })
    }
  },

效果展示