微信小程序之物流狀態時間軸

發布時間：2018-11-02 09:16 所屬欄目：小程序開發教程

一(yi)個(ge)月左右沒更新(xin)博客了，最(zui)近(jin)有(you)點懶了哈（工(gong)作(zuo)上真的(de)忙），很(hen)多(duo)工(gong)作(zuo)上學習(xi)(xi)到的(de)東西都沒有(you)及時分(fen)(fen)享(xiang)(xiang)出來，有(you)點愧疚，不(bu)過自(zi)(zi)己最(zui)近(jin)一(yi)直在(zai)收(shou)集資料和(he)學習(xi)(xi)一(yi)些新(xin)技(ji)術，最(zui)主要是(shi)想要構建(jian)自(zi)(zi)己的(de)前(qian)端技(ji)術體系和(he)自(zi)(zi)定(ding)義一(yi)個(ge)前(qian)端規范文檔，哈哈哈。說重點啦，微(wei)信小程序(xu)里面開發的(de)商城模(mo)塊還挺多(duo)的(de)，剛好(hao)寫了一(yi)個(ge)物流狀態的(de)時間軸，簡單分(fen)(fen)享(xiang)(xiang)一(yi)下哈。

（一）實現效果

真機測(ce)試的(de)結果（圖(tu)片忘記縮小了）

（二）實現分析

頁(ye)面(mian)布局(ju)拆(chai)分：

簡(jian)單的(de)(de)說：就是(shi)父級容(rong)(rong)器(qi)下，左邊(bian)的(de)(de)子(zi)級容(rong)(rong)器(qi)是(shi)設(she)(she)(she)置絕(jue)對(dui)定(ding)位(wei)（記得父級要設(she)(she)(she)置相對(dui)定(ding)位(wei)哈(ha)），然后自己調(diao)位(wei)置，中間子(zi)級容(rong)(rong)器(qi)下放三個子(zi)容(rong)(rong)器(qi)（設(she)(she)(she)置時間軸線、點的(de)(de)樣式），右邊(bian)的(de)(de)子(zi)級容(rong)(rong)器(qi)設(she)(she)(she)置； wxml代碼有備注信息。

（三）實現代碼

1、wxml代碼：

<view class='g_con'>

  <view class='topExpress'>

    <view class='topExpress-left'>
      <image src='/images/Exchange_goods_map_1.png' style='width:60rpx;height:60rpx;border-radius:50%;'></image>
    </view>
    <view class='topExpress-right'>
      <view class='topExpress-right-top'>圓通速遞</view>
      <view class='topExpress-right-middle'>運單號：813291235464788594</view>
      <view class='topExpress-right-bottom'>官方電話 95554 ></view>
    </view>

  </view>

  <!-- 物流時間軸 -->
  <view class='expressRecord'>


    <!-- 頂部收貨地址 -->
    <view class='expressRecord-getAddress'>
      <view class='expressRecord-top'>
        <view class='getAddress-icon'>
          收
        </view>
        <view class='getAddress-text'>[收貨地址] 廣東省深圳市南山區 南山街道 億利達大廈</view>
      </view>
    </view>

    <!-- 頂部收貨地址半個時間軸線 -->
    <view class='noReach-online-top-close'></view>


    <!-- 單個物流記錄點時間軸：當前正在進行的物流狀態 -->
    <view class='expressRecord-single-close'>

      <!-- 左邊子容器 -->
      <view class='expressRecord-single-noReach-online-top-close'>
        <!-- 正在進行的時間軸上半個時間線 -->
        <view class='online-top-closing'></view>
        <!-- 正在進行的時間軸點 -->
        <view class='dot-closing'></view>
        <!-- 正在進行的時間軸下半個時間線 -->
        <view class='online-bottom'></view>
      </view>

      <!-- 右邊子容器 -->
      <view class='expressRecord-text'>
        <view class='expressRecord-statusing'>運輸中</view>
        <view class='expressRecord-status-addressing'>武漢轉運中心公司 已發出，下一站 深圳轉運中心</view>
      </view>

      <!-- 相對父級容器絕對定位的日期 -->
      <view class='expressRecord-dating'>
        <view class='expressRecord-date-text'>
          昨天
        </view>
        <view class='expressRecord-date-time'>
          20:39
        </view>
      </view>
    </view>


    <!-- 單個物流記錄點時間軸：已經過去的物流狀態 -->
    <view class='expressRecord-single-close'>
      <view class='expressRecord-single-noReach-online-top-close'>
        <view class='online-top-close'></view>
        <view class='dot-close'></view>
        <view class='online-bottom'></view>
      </view>

      <view class='expressRecord-text'>
        <view class='expressRecord-status'></view>
        <view class='expressRecord-status-address'>武漢轉運中心公司 已收入</view>
      </view>

      <view class='expressRecord-date'>
        <view class='expressRecord-date-text'>
          昨天
        </view>
        <view class='expressRecord-date-time'>
          20:37
        </view>
      </view>
    </view>




    <view class='expressRecord-single-close'>
      <view class='expressRecord-single-noReach-online-top-close'>
        <view class='online-top-close'></view>
        <view class='dot-close'></view>
        <view class='online-bottom'></view>
      </view>

      <view class='expressRecord-text'>
        <view class='expressRecord-status'></view>
        <view class='expressRecord-status-address'>湖北省孝感市漢川市公司 已打包</view>
      </view>

      <view class='expressRecord-date'>
        <view class='expressRecord-date-text'>
          昨天
        </view>
        <view class='expressRecord-date-time'>
          14:37
        </view>
      </view>
    </view>




    <view class='expressRecord-single-close'>
      <view class='expressRecord-single-noReach-online-top-close'>
        <view class='online-top-close'></view>
        <view class='dot-close'></view>
        <view class='online-bottom'></view>
      </view>

      <view class='expressRecord-text'>
        <view class='expressRecord-status'>已攬件</view>
        <view class='expressRecord-status-address'>湖北省孝感市漢川市公司 已收件</view>
      </view>

      <view class='expressRecord-date'>
        <view class='expressRecord-date-text'>
          昨天
        </view>
        <view class='expressRecord-date-time'>
          14:17
        </view>
      </view>
    </view>





    <view class='expressRecord-single-close'>
      <view class='expressRecord-single-noReach-online-top-close'>
        <view class='online-top-close'></view>
        <view class='dot-close'></view>
        <!-- 起始位置，下半個時間軸線不用 -->
        <view class='online-bottom-start'></view>
      </view>

      <view class='expressRecord-text'>
        <view class='expressRecord-status'>已發貨</view>
        <view class='expressRecord-status-address'>賣家發貨</view>
      </view>

      <view class='expressRecord-date'>
        <view class='expressRecord-date-text'>
          昨天
        </view>
        <view class='expressRecord-date-time'>
          13:50
        </view>
      </view>
    </view>








  </view>



</view>
復制代碼
2、wxss代碼：

page {
  background: #f4f4f4;
}

.g_con {
  width: 100vw;
  overflow-x: hidden;
}

.topExpress {
  width: 710rpx;
  height: 155rpx;
  background: #fff;
  margin: 10rpx auto;
  display: flex;
  border-radius: 10rpx;
}

.topExpress-left {
  width: 100rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topExpress-right {
  font-size: 26rpx;
  color: #333;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: flex-start;
  padding: 20rpx 0;
}

.topExpress-right-middle {
  font-size: 22rpx;
}

.topExpress-right-bottom {
  font-size: 20rpx;
  color: #666;
}

.expressRecord {
  width: 710rpx;
  padding-top: 30rpx;
  padding-bottom: 200rpx;
  background: #fff;
  margin: 0 auto;
  border-radius: 10rpx;
}

.expressRecord-getAddress {
  width: 100%;
  font-size: 22rpx;
  color: #999;
  display: flex;
}

.expressRecord-top {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.getAddress-icon {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background: #999;
  font-size: 18rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 80rpx;
}

.getAddress-text {
  margin-left: 20rpx;
}

.noReach-online-top-close {
  width: 1rpx;
  height: 50rpx;
  background: #d7d7d7;
  margin-left: 95rpx;
}

.expressRecord-single-close {
  width: 100%;
  height: 122rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.expressRecord-single-noReach-online-top-close {
  display: flex;
  flex-direction: column;
}

.online-top-closing {
  width: 1rpx;
  height: 50rpx;
  background: #d7d7d7;
  margin-left: 95rpx;
}

.online-top-close {
  width: 1rpx;
  height: 50rpx;
  background: #999;
  margin-left: 95rpx;
}

.dot-closing {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  margin-left: 90rpx;
  margin-top: 6rpx;
  margin-bottom: 6rpx;
  background: #fe4f33;
}

.dot-close {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  margin-left: 90rpx;
  margin-top: 6rpx;
  margin-bottom: 6rpx;
  background: #999;
}

.online-bottom {
  width: 1rpx;
  height: 50rpx;
  background: #999;
  margin-left: 95rpx;
}

.online-bottom-start {
  width: 1rpx;
  height: 50rpx;
  /* background: #999; */
  margin-left: 95rpx;
}

.expressRecord-text {
  margin-left: 30rpx;
}

.expressRecord-statusing {
  font-size: 26rpx;
  color: #333;
}

.expressRecord-status-addressing {
  font-size: 22rpx;
  color: #333;
}


.expressRecord-status {
  font-size: 26rpx;
  color: #999;
}

.expressRecord-status-address {
  font-size: 22rpx;
  color: #999;
}

.expressRecord-dating {
  position: absolute;
  height: 100%;
  /* top: 0;
  bottom: 0; */
  left: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #333;
}

.expressRecord-date {
  position: absolute;
  height: 100%;
  /* top: 0;
  bottom: 0; */
  left: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #999;
}

.expressRecord-date-text {
  font-size: 24rpx;
}

.expressRecord-date-time {
  font-size: 18rpx;
}

如果感覺有用的話，點個贊唄，支持一下我哈。

易優小程(cheng)序（企業版）+靈活api+前后代碼開源碼云倉庫(ku):

本文地址：//www.jinyoudianli.com/wxmini/doc/course/24926.html 復制鏈接如需定制請(qing)聯(lian)系易(yi)優客服(fu)咨詢：

免責(ze)聲明：本站(zhan)(zhan)所有文章和(he)圖片均來自用(yong)戶分享和(he)網(wang)絡收集，文章和(he)圖片版權歸原作者及原出處所有，僅(jin)供學習(xi)與(yu)參(can)考，請勿用(yong)于商業用(yong)途，如果損害(hai)了您(nin)的權利，請聯(lian)系網(wang)站(zhan)(zhan)客(ke)服處理。