做電商型別的小程式一定會碰到編寫物流資訊的時候，一般頁面如下圖
難點在於只有一條資訊時候的頁面樣式
以及多條資訊最後一條資訊的頁面樣式
之前沒做過這一塊的東西，所以剛碰到的時候想了老半天orz。後來上個廁所的時候一下子想通了，然後就想在這裡做個記錄，分享給大家。
先給個我的想法圖給大家：
我把一條資訊分為左右兩塊區域，左邊顯示進度線，右邊顯示文字資訊。然後將左邊的進度線分為上下兩部分，如圖所示，上為紅色，下為藍色。
然後灰色的點和橘色點用。
樣式寫完之後就是根據不同條件來顯示不同的樣式。
比如只有1條資訊的時候，線都不顯示，然後有多條資訊的時候就把最後一條藍色的線隱藏。
這其中有個要注意的地方就是需要給右邊物流文字資訊的區域給乙個最大高度，然後控制最多顯示兩行資訊，多餘的顯示省略號，不然的話左邊的線就不好設定顯示的樣式，有的短，有的長的。
更新：**已上傳至github，可自取。
微信小程式 小程式樣式WXSS
wxss weixin style sheets 是 套樣式語 於描述 wxml 的元件樣式。與 css 相 wxss 擴充套件的特性有 1.響應式 度單位 rpx rpx responsive pixel 可以根據螢幕寬度進 適應。規定螢幕寬為 750rpx 如在iphone6 上，螢幕寬度為 3...
微信小程式物流詳情頁面
xx速遞 運單號 官方 xx 10 30 收運輸中 上海市 快件已從上海航空部發出，準備發往深圳轉運中心 page topexpress topexpress left topexpress right topexpress right middle topexpress right bottom ...
微信小程式樣式大全（一）
1.尺寸 text 3.設定彈性盒子模型 container 語法 水平主軸 justify content flex start flex end center space between space around 垂直交叉軸 align items flex start flex end cen...