{"id":13511385,"url":"https://github.com/super456/weapp_expressTime","last_synced_at":"2025-03-30T20:33:10.325Z","repository":{"id":201730920,"uuid":"154635229","full_name":"super456/weapp_expressTime","owner":"super456","description":"微信小程序之物流状态时间轴简单模板样式","archived":false,"fork":false,"pushed_at":"2019-01-28T04:10:10.000Z","size":76,"stargazers_count":68,"open_issues_count":1,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-01T13:34:52.236Z","etag":null,"topics":["applet","timeline","timeline-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/super456.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-10-25T08:21:46.000Z","updated_at":"2024-10-24T14:25:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"8d294e25-2bf8-4aa6-ad0d-1aae9af9340c","html_url":"https://github.com/super456/weapp_expressTime","commit_stats":null,"previous_names":["super456/weapp_expresstime"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/super456%2Fweapp_expressTime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/super456%2Fweapp_expressTime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/super456%2Fweapp_expressTime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/super456%2Fweapp_expressTime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/super456","download_url":"https://codeload.github.com/super456/weapp_expressTime/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246379379,"owners_count":20767694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["applet","timeline","timeline-component"],"created_at":"2024-08-01T03:00:48.920Z","updated_at":"2025-03-30T20:33:10.022Z","avatar_url":"https://github.com/super456.png","language":"JavaScript","readme":"微信小程序里面开发的商城模块还挺多的，刚好写了一个物流状态的时间轴，简单分享一下哈。\n\n### （一）实现效果\n真机测试的结果（图片忘记缩小了）\n\n![效果图](/images/01.png)\n\n\n### （二）实现分析\n页面布局拆分：\n\n![布局拆分](/images/02.png)\n\n简单的说：就是父级容器下，左边的子级容器是设置绝对定位（记得父级要设置相对定位哈），然后自己调位置，中间子级容器下放三个子容器（设置时间轴线、点的样式），右边的子级容器设置；**wxml代码有备注信息**。\n\n### （三）实现代码\n1、wxml代码：\n\n```html\n\u003cview class='g_con'\u003e\n\n  \u003cview class='topExpress'\u003e\n\n    \u003cview class='topExpress-left'\u003e\n      \u003cimage src='/images/Exchange_goods_map_1.png' style='width:60rpx;height:60rpx;border-radius:50%;'\u003e\u003c/image\u003e\n    \u003c/view\u003e\n    \u003cview class='topExpress-right'\u003e\n      \u003cview class='topExpress-right-top'\u003e圆通速递\u003c/view\u003e\n      \u003cview class='topExpress-right-middle'\u003e运单号：813291235464788594\u003c/view\u003e\n      \u003cview class='topExpress-right-bottom'\u003e官方电话 95554 \u003e\u003c/view\u003e\n    \u003c/view\u003e\n\n  \u003c/view\u003e\n\n  \u003c!-- 物流时间轴 --\u003e\n  \u003cview class='expressRecord'\u003e\n\n\n    \u003c!-- 顶部收货地址 --\u003e\n    \u003cview class='expressRecord-getAddress'\u003e\n      \u003cview class='expressRecord-top'\u003e\n        \u003cview class='getAddress-icon'\u003e\n          收\n        \u003c/view\u003e\n        \u003cview class='getAddress-text'\u003e[收货地址] 广东省深圳市南山区 南山街道 亿利达大厦\u003c/view\u003e\n      \u003c/view\u003e\n    \u003c/view\u003e\n\n    \u003c!-- 顶部收货地址半个时间轴线 --\u003e\n    \u003cview class='noReach-online-top-close'\u003e\u003c/view\u003e\n\n\n    \u003c!-- 单个物流记录点时间轴：当前正在进行的物流状态 --\u003e\n    \u003cview class='expressRecord-single-close'\u003e\n\n      \u003c!-- 左边子容器 --\u003e\n      \u003cview class='expressRecord-single-noReach-online-top-close'\u003e\n        \u003c!-- 正在进行的时间轴上半个时间线 --\u003e\n        \u003cview class='online-top-closing'\u003e\u003c/view\u003e\n        \u003c!-- 正在进行的时间轴点 --\u003e\n        \u003cview class='dot-closing'\u003e\u003c/view\u003e\n        \u003c!-- 正在进行的时间轴下半个时间线 --\u003e\n        \u003cview class='online-bottom'\u003e\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003c!-- 右边子容器 --\u003e\n      \u003cview class='expressRecord-text'\u003e\n        \u003cview class='expressRecord-statusing'\u003e运输中\u003c/view\u003e\n        \u003cview class='expressRecord-status-addressing'\u003e武汉转运中心公司 已发出，下一站 深圳转运中心\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003c!-- 相对父级容器绝对定位的日期 --\u003e\n      \u003cview class='expressRecord-dating'\u003e\n        \u003cview class='expressRecord-date-text'\u003e\n          昨天\n        \u003c/view\u003e\n        \u003cview class='expressRecord-date-time'\u003e\n          20:39\n        \u003c/view\u003e\n      \u003c/view\u003e\n    \u003c/view\u003e\n\n\n    \u003c!-- 单个物流记录点时间轴：已经过去的物流状态 --\u003e\n    \u003cview class='expressRecord-single-close'\u003e\n      \u003cview class='expressRecord-single-noReach-online-top-close'\u003e\n        \u003cview class='online-top-close'\u003e\u003c/view\u003e\n        \u003cview class='dot-close'\u003e\u003c/view\u003e\n        \u003cview class='online-bottom'\u003e\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003cview class='expressRecord-text'\u003e\n        \u003cview class='expressRecord-status'\u003e\u003c/view\u003e\n        \u003cview class='expressRecord-status-address'\u003e武汉转运中心公司 已收入\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003cview class='expressRecord-date'\u003e\n        \u003cview class='expressRecord-date-text'\u003e\n          昨天\n        \u003c/view\u003e\n        \u003cview class='expressRecord-date-time'\u003e\n          20:37\n        \u003c/view\u003e\n      \u003c/view\u003e\n    \u003c/view\u003e\n\n\n\n\n    \u003cview class='expressRecord-single-close'\u003e\n      \u003cview class='expressRecord-single-noReach-online-top-close'\u003e\n        \u003cview class='online-top-close'\u003e\u003c/view\u003e\n        \u003cview class='dot-close'\u003e\u003c/view\u003e\n        \u003cview class='online-bottom'\u003e\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003cview class='expressRecord-text'\u003e\n        \u003cview class='expressRecord-status'\u003e\u003c/view\u003e\n        \u003cview class='expressRecord-status-address'\u003e湖北省孝感市汉川市公司 已打包\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003cview class='expressRecord-date'\u003e\n        \u003cview class='expressRecord-date-text'\u003e\n          昨天\n        \u003c/view\u003e\n        \u003cview class='expressRecord-date-time'\u003e\n          14:37\n        \u003c/view\u003e\n      \u003c/view\u003e\n    \u003c/view\u003e\n\n\n\n\n    \u003cview class='expressRecord-single-close'\u003e\n      \u003cview class='expressRecord-single-noReach-online-top-close'\u003e\n        \u003cview class='online-top-close'\u003e\u003c/view\u003e\n        \u003cview class='dot-close'\u003e\u003c/view\u003e\n        \u003cview class='online-bottom'\u003e\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003cview class='expressRecord-text'\u003e\n        \u003cview class='expressRecord-status'\u003e已揽件\u003c/view\u003e\n        \u003cview class='expressRecord-status-address'\u003e湖北省孝感市汉川市公司 已收件\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003cview class='expressRecord-date'\u003e\n        \u003cview class='expressRecord-date-text'\u003e\n          昨天\n        \u003c/view\u003e\n        \u003cview class='expressRecord-date-time'\u003e\n          14:17\n        \u003c/view\u003e\n      \u003c/view\u003e\n    \u003c/view\u003e\n\n\n\n\n\n    \u003cview class='expressRecord-single-close'\u003e\n      \u003cview class='expressRecord-single-noReach-online-top-close'\u003e\n        \u003cview class='online-top-close'\u003e\u003c/view\u003e\n        \u003cview class='dot-close'\u003e\u003c/view\u003e\n        \u003c!-- 起始位置，下半个时间轴线不用 --\u003e\n        \u003cview class='online-bottom-start'\u003e\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003cview class='expressRecord-text'\u003e\n        \u003cview class='expressRecord-status'\u003e已发货\u003c/view\u003e\n        \u003cview class='expressRecord-status-address'\u003e卖家发货\u003c/view\u003e\n      \u003c/view\u003e\n\n      \u003cview class='expressRecord-date'\u003e\n        \u003cview class='expressRecord-date-text'\u003e\n          昨天\n        \u003c/view\u003e\n        \u003cview class='expressRecord-date-time'\u003e\n          13:50\n        \u003c/view\u003e\n      \u003c/view\u003e\n    \u003c/view\u003e\n\n\n\n\n\n\n\n\n  \u003c/view\u003e\n\n\n\n\u003c/view\u003e\n```\n\n\n2、wxss代码：\n\n```css\npage {\n  background: #f4f4f4;\n}\n\n.g_con {\n  width: 100vw;\n  overflow-x: hidden;\n}\n\n.topExpress {\n  width: 710rpx;\n  height: 155rpx;\n  background: #fff;\n  margin: 10rpx auto;\n  display: flex;\n  border-radius: 10rpx;\n}\n\n.topExpress-left {\n  width: 100rpx;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.topExpress-right {\n  font-size: 26rpx;\n  color: #333;\n  display: flex;\n  justify-content: space-around;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 20rpx 0;\n}\n\n.topExpress-right-middle {\n  font-size: 22rpx;\n}\n\n.topExpress-right-bottom {\n  font-size: 20rpx;\n  color: #666;\n}\n\n.expressRecord {\n  width: 710rpx;\n  padding-top: 30rpx;\n  padding-bottom: 200rpx;\n  background: #fff;\n  margin: 0 auto;\n  border-radius: 10rpx;\n}\n\n.expressRecord-getAddress {\n  width: 100%;\n  font-size: 22rpx;\n  color: #999;\n  display: flex;\n}\n\n.expressRecord-top {\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.getAddress-icon {\n  width: 30rpx;\n  height: 30rpx;\n  border-radius: 50%;\n  background: #999;\n  font-size: 18rpx;\n  color: #fff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 80rpx;\n}\n\n.getAddress-text {\n  margin-left: 20rpx;\n}\n\n.noReach-online-top-close {\n  width: 1rpx;\n  height: 50rpx;\n  background: #d7d7d7;\n  margin-left: 95rpx;\n}\n\n.expressRecord-single-close {\n  width: 100%;\n  height: 122rpx;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n}\n\n.expressRecord-single-noReach-online-top-close {\n  display: flex;\n  flex-direction: column;\n}\n\n.online-top-closing {\n  width: 1rpx;\n  height: 50rpx;\n  background: #d7d7d7;\n  margin-left: 95rpx;\n}\n\n.online-top-close {\n  width: 1rpx;\n  height: 50rpx;\n  background: #999;\n  margin-left: 95rpx;\n}\n\n.dot-closing {\n  width: 10rpx;\n  height: 10rpx;\n  border-radius: 50%;\n  margin-left: 90rpx;\n  margin-top: 6rpx;\n  margin-bottom: 6rpx;\n  background: #fe4f33;\n}\n\n.dot-close {\n  width: 10rpx;\n  height: 10rpx;\n  border-radius: 50%;\n  margin-left: 90rpx;\n  margin-top: 6rpx;\n  margin-bottom: 6rpx;\n  background: #999;\n}\n\n.online-bottom {\n  width: 1rpx;\n  height: 50rpx;\n  background: #999;\n  margin-left: 95rpx;\n}\n\n.online-bottom-start {\n  width: 1rpx;\n  height: 50rpx;\n  /* background: #999; */\n  margin-left: 95rpx;\n}\n\n.expressRecord-text {\n  margin-left: 30rpx;\n}\n\n.expressRecord-statusing {\n  font-size: 26rpx;\n  color: #333;\n}\n\n.expressRecord-status-addressing {\n  font-size: 22rpx;\n  color: #333;\n}\n\n\n.expressRecord-status {\n  font-size: 26rpx;\n  color: #999;\n}\n\n.expressRecord-status-address {\n  font-size: 22rpx;\n  color: #999;\n}\n\n.expressRecord-dating {\n  position: absolute;\n  height: 100%;\n  /* top: 0;\n  bottom: 0; */\n  left: 20rpx;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  color: #333;\n}\n\n.expressRecord-date {\n  position: absolute;\n  height: 100%;\n  /* top: 0;\n  bottom: 0; */\n  left: 20rpx;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  color: #999;\n}\n\n.expressRecord-date-text {\n  font-size: 24rpx;\n}\n\n.expressRecord-date-time {\n  font-size: 18rpx;\n}\n\n```\n\n**如果感觉有用的话，点个赞呗，支持一下我哈。**\n\n","funding_links":[],"categories":["mini-programe"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuper456%2Fweapp_expressTime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuper456%2Fweapp_expressTime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuper456%2Fweapp_expressTime/lists"}