uniapp——使用colorUI、自定义顶部导航栏、漂亮的卡片时间列表（包括微信小程序时间列表）_uniapp顶部导航栏文字样式通过css修改后

一、使用colorUI实现如下的效果：

1、导入colorUI

一、下载colorUI源码解压，复制根目录的 /colorui 文件夹到你的根目录

二、App.vue 引入关键Css main.css icon.css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    @import "app.css"; /* 你的项目css */
    ....
</style>
1
2
3
4
5
6

三、pages.json 配置取消系统导航栏

"globalStyle": {
    "navigationStyle": "custom"
},
1
2
3

四、在main.js 引入 cu-custom 组件。

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
1
2

page.vue 页面可以直接调用了

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    <block slot="backText">返回</block>
    <block slot="content">导航栏</block>
</cu-custom>
1
2
3
4

2、所有代码

<template>
	<view class="content">
		<view class="cu-bar ">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue">个人信息</text>
				<text class="text-ABC text-blue">Personal</text>
			</view>
		</view>
		
		<view class="view_3">
			<image class="img_icon_small" src="../../static/logo.png"></image>
			<text>专业：计算机</text>
		</view>
		<view class="view_3">
			<image class="img_icon_small" src="../../static/logo.png"></image>
			<text>学历：本科</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		/* align-items: center;
		justify-content: center; */
		background-color: #FFFFFF;
		margin: 20upx;
		border-radius: 15upx;
	}

	.view_3 {
		width: 100vw;
		height: 60upx
	}
	.img_icon_small{
		margin: 0upx 20upx;
		width: 25upx;
		height: 25upx;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

二、使用colorUI的自定义顶部导航

1、导入colorUI

参考上面提到的步骤

2、在app.vue的onLaunch导入如下代码

			uni.getSystemInfo({
				success: function(e) {
					// #ifndef MP
					Vue.prototype.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						Vue.prototype.CustomBar = e.statusBarHeight + 50;
					} else {
						Vue.prototype.CustomBar = e.statusBarHeight + 45;
					};
					// #endif
			
					// #ifdef MP-WEIXIN
					Vue.prototype.StatusBar = e.statusBarHeight;
					let custom = wx.getMenuButtonBoundingClientRect();
					Vue.prototype.Custom = custom;
					Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
					// #endif		
			
					// #ifdef MP-ALIPAY
					Vue.prototype.StatusBar = e.statusBarHeight;
					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
					// #endif
				}
			})
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在export default { 的上一行添加：

import Vue from 'vue'
1

3、页面代码

<template>
	<view class="content">

		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">个人技能</block>
		</cu-custom>
		<scroll-view scroll-y class="page">
			页面 - 2
		</scroll-view>

	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

三、时间列表

1、导入colorUI

参考上面提到的步骤

2、代码

<view class="cu-timeline">
			<view class="cu-time" style="width: 200upx;">2019-目前</view>
			<view class="cu-item cur">
				<view class="bg-gradual-blue content">

					<view class="text-bold text-xl">
						<text>北京慧资道咨询有限公司</text>
						<!-- <text class="text-orange" style="float: right;">外企</text> -->
					</view>
					<view class="padding-top-xl text-bold text-df">
						<text>规模：120人</text>
						<text class="text-orange" style="float: right;">JAVA开发</text>
					</view>
					<view class="padding-top-xl text-ls">
						我在里面负责技术监察，管理团队，统一调度，统一代码规范，统一指挥，团结一致
					</view>

				</view>
			</view>
		</view>
		
		<view class="cu-timeline">
			<view class="cu-time" style="width: 200upx;">2016-2019</view>
			<view class="cu-item cur">
				<view class="bg-gradual-blue content">
		
					<view class="text-bold text-xl">
						<text>北京好味道咨询有限公司</text>
						<!-- <text class="text-orange" style="float: right;">外企</text> -->
					</view>
					<view class="padding-top-xl text-bold text-df">
						<text>规模：110人</text>
						<text class="text-orange" style="float: right;">JAVA开发</text>
					</view>
					<view class="padding-top-xl text-ls">
						我在里面负责技术监察，管理团队，统一调度，统一代码规范，统一指挥，团结一致
					</view>
		
				</view>
			</view>
		</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

三、时间列表（微信小程序）

效果图：

wxml

<view class='weui-cell-third'>
  <view class="page__title">
    <image class="img-express"
      src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3820331293,646389282&fm=26&gp=0.jpg"></image>
    <text class="text-express">中通快递：ZT1234987777</text>
    <text class="text-grey text-copy">复制</text>
    <text class="text-grey text-call">打电话</text>
  </view>


  <block wx:for="{{axis}}" wx:key="{{index}}">
    <view class='weui-cell-list'>
      <text class="text-grey">{{item.status}}</text>

      <view class="contain-circle-line">
        <view class=' {{item.status!="运送中"?"weui-cell-circle-1":"weui-cell-circle"}}' style="background-color:{{item.status=='待取件'&&'#FFDE00'}};">
          <text style="color:{{func.numFixed(item.status).color}};">{{func.numFixed(item.status).str}}</text>                    
        </view>
        <view wx:if="{{axis.length!==index+1}}" class='weui-cell-line' />
      </view>


      <view class='weui-cell-detail'>
        <view class='text-grey weui-cell-time '>{{item.time}}</view>
        <view class='text-grey weui-cell-event '>{{item.event}}</view>
      </view>

    </view>
  </block>

</view>


<wxs module="func">
  module.exports = {
    numFixed: function (value) {
      var statusJson = {};
      var str = ''
      var color = ''
      switch (value) {
        case "待取件":
          statusJson.str = '取'
          // statusJson.color = '#FFDE00'
          break;
        case "已揽收":
          statusJson.str = '收'
          statusJson.color = '#fff'
          break;
        case "已投柜":
          statusJson.str = '投'
          statusJson.color = '#fff'
          break;
      }
      return statusJson
    }
  }
</wxs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

wxss

.weui-cell-third {
  background: #fff;
}

.page__title {
  height: 32px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F0F2F5;
  box-shadow: 0 0 3px #F0F2F5;
  margin-bottom: 16px;
}

.img-express {
  margin-left: 16px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.text-express {
  margin-left: 24px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 700;
  color: #242831;
  line-height: 17px;
}

.text-copy {
  position: fixed;
  right: 70px;
}

.text-copy::after {
  content: '';
  width: 1px;
  height: 12px;
  position: absolute;
  background-color: #9B9B9B;
  /* top: 30rpx; */
  top: 5rpx;
  right: -9px;
}

.text-call {
  position: fixed;
  right: 16px;
}

.weui-cell-list {
  background: #fff;
  margin: 0px 0px 0px 16px;
  display: flex;
}

.contain-circle-line {
  margin: 2px 0 0 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
}

.weui-cell-line {
  border-left: 1px solid #CDCDCD;
  height:  100%;
  /* min-height: 50px; */
}

.weui-cell-circle {
  border-radius: 5px;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  background-color: #CDCDCD;
}

.weui-cell-circle-1 {
  border-radius: 10px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  background-color: #4C515F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.weui-cell-detail {
  margin: 0 0 59px 29px;
  max-width: 230px;
}

.weui-cell-time {
  font-size: 12px;
  height: 17px;
  line-height: 17px;
}

.weui-cell-event {}

/* 12大的灰色字体 */
.text-grey {
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9B9B9B;
  line-height: 17px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

js里面就一个数组：

 axis: [{
        status: '待取件',
        time: '2018-2-15 08:12',
        event: '您的快件已存放至南山区蛇口海上世界全家便利店【克拉柜】，请及时取件。有问题请联系派件员'
      }, {
        status: '运送中',
        time: '2018-2-15 09:30',
        event: '【**市】**省**市**区**派件员：*** 电话：'
      }, {
        status: '运送中',
        time: '2018-2-15 10:12',
        event: '快件已到达【**中转场】'
      }, {
        status: '运送中',
        time: '2018-2-15 15:12',
        event: '快件已发车'
      }, {
        status: '已揽收',
        time: '2018-2-15 10:12',
        event: '【中通快递】已揽收快件'
      }, {
        status: '已投柜',
        time: '2018-2-15 15:12',
        event: '用户已投柜'
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25