1. 程式人生 > >微信小程式之物流狀態時間軸

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

一個月左右沒更新部落格了,最近有點懶了哈(工作上真的忙),很多工作上學習到的東西都沒有及時分享出來,有點愧疚,不過自己最近一直在收集資料和學習一些新技術,最主要是想要構建自己的前端技術體系和自定義一個前端規範文件,哈哈哈。說重點啦,微信小程式裡面開發的商城模組還挺多的,剛好寫了一個物流狀態的時間軸,簡單分享一下哈。

(一)實現效果

真機測試的結果(圖片忘記縮小了)

效果圖

(二)實現分析

頁面佈局拆分:

拆分圖

簡單的說:就是父級容器下,左邊的子級容器是設定絕對定位(記得父級要設定相對定位哈),然後自己調位置,中間子級容器下放三個子容器(設定時間軸線、點的樣式),右邊的子級容器設定;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;
}

複製程式碼

如果感覺有用的話,點個讚唄,支援一下我哈。