Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/super456/weapp_expressTime
微信小程序之物流状态时间轴简单模板样式
https://github.com/super456/weapp_expressTime
applet timeline timeline-component
Last synced: about 1 month ago
JSON representation
微信小程序之物流状态时间轴简单模板样式
- Host: GitHub
- URL: https://github.com/super456/weapp_expressTime
- Owner: super456
- Created: 2018-10-25T08:21:46.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-28T04:10:10.000Z (almost 6 years ago)
- Last Synced: 2024-08-02T03:07:55.833Z (4 months ago)
- Topics: applet, timeline, timeline-component
- Language: JavaScript
- Homepage:
- Size: 74.2 KB
- Stars: 66
- Watchers: 2
- Forks: 17
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-state - weapp_expressTime
README
微信小程序里面开发的商城模块还挺多的，刚好写了一个物流状态的时间轴，简单分享一下哈。
### （一）实现效果
真机测试的结果（图片忘记缩小了）
### （二）实现分析
页面布局拆分：
简单的说：就是父级容器下，左边的子级容器是设置绝对定位（记得父级要设置相对定位哈），然后自己调位置，中间子级容器下放三个子容器（设置时间轴线、点的样式），右边的子级容器设置；**wxml代码有备注信息**。
### （三）实现代码
1、wxml代码：
```html
圆通速递
运单号：813291235464788594
官方电话 95554 >
收
[收货地址] 广东省深圳市南山区 南山街道 亿利达大厦
运输中
武汉转运中心公司 已发出，下一站 深圳转运中心
昨天
20:39
武汉转运中心公司 已收入
昨天
20:37
湖北省孝感市汉川市公司 已打包
昨天
14:37
已揽件
湖北省孝感市汉川市公司 已收件
昨天
14:17
已发货
卖家发货
昨天
13:50
```
2、wxss代码：
```css
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;
}
```
**如果感觉有用的话，点个赞呗，支持一下我哈。**