博主信息
小辰
博文
26
粉丝
0
评论
2
访问量
3613
积分:0
P豆:52

对colorui-uiapp的初步使用201013

2020年10月13日 16:51:55阅读数:150博客 / 小辰/ Colorui-uniapp的学习

写在前面

好久没发博客了,也迷茫了一些时间所幸都已经过去,日子总要过去,每天都要做些有意义的事情,希望看到这篇文章的盆友有所帮助好久没发博客了,也迷茫了一些时间所幸都已经过去,日子总要过去,每天都要做些有意义的事情,希望看到这篇文章的盆友有所帮助

下面是一些干货

学习这个组件主要是用于多端开发,主要还是比较美观养眼,男人总是只爱美的,一直不变QAQ。

一般的根据文档的开始使用

下载源码解压,复制根目录的 /colorui 文件夹到你的根目录

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

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

使用自定义导航栏

导航栏作为常用组件有做简单封装,当然你也可以直接复制代码结构自己修改,达到个性化目的。

App.vue 获得系统信息

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

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

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

复制代码结构可以直接使用,注意全局变量的获取。

使用封装,在main.js 引入 cu-custom 组件。

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

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

  1. <cu-custom bgColor="bg-gradual-blue" :isBack="true">
  2. <block slot="backText">返回</block>
  3. <block slot="content">导航栏</block>
  4. </cu-custom>
参数 作用 类型 默认值
bgColor 背景颜色类名 String ‘’
isBack 是否开启返回 Boolean false
bgImage 背景图片路径 String ‘’
slot块 作用
backText 返回时的文字
content 中间区域
right 右侧区域(小程序端可使用范围很窄!)

我的使用方法

做到这里是不是感觉自己的导航栏和官方给的效果不一样,没错我实例一下,照着cv就出现错误了,检查发现问题出在全局样式设置上App.vue,下面是整个样式文件代码,建议直接全复制,方便一点,试过已经可以完美解决。

  1. <script>
  2. import Vue from 'vue'
  3. export default {
  4. onLaunch: function() {
  5. uni.getSystemInfo({
  6. success: function(e) {
  7. // #ifndef MP
  8. Vue.prototype.StatusBar = e.statusBarHeight;
  9. if (e.platform == 'android') {
  10. Vue.prototype.CustomBar = e.statusBarHeight + 50;
  11. } else {
  12. Vue.prototype.CustomBar = e.statusBarHeight + 45;
  13. };
  14. // #endif
  15. // #ifdef MP-WEIXIN
  16. Vue.prototype.StatusBar = e.statusBarHeight;
  17. let custom = wx.getMenuButtonBoundingClientRect();
  18. Vue.prototype.Custom = custom;
  19. Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
  20. // #endif
  21. // #ifdef MP-ALIPAY
  22. Vue.prototype.StatusBar = e.statusBarHeight;
  23. Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
  24. // #endif
  25. }
  26. })
  27. Vue.prototype.ColorList = [{
  28. title: '嫣红',
  29. name: 'red',
  30. color: '#e54d42'
  31. },
  32. {
  33. title: '桔橙',
  34. name: 'orange',
  35. color: '#f37b1d'
  36. },
  37. {
  38. title: '明黄',
  39. name: 'yellow',
  40. color: '#fbbd08'
  41. },
  42. {
  43. title: '橄榄',
  44. name: 'olive',
  45. color: '#8dc63f'
  46. },
  47. {
  48. title: '森绿',
  49. name: 'green',
  50. color: '#39b54a'
  51. },
  52. {
  53. title: '天青',
  54. name: 'cyan',
  55. color: '#1cbbb4'
  56. },
  57. {
  58. title: '海蓝',
  59. name: 'blue',
  60. color: '#0081ff'
  61. },
  62. {
  63. title: '姹紫',
  64. name: 'purple',
  65. color: '#6739b6'
  66. },
  67. {
  68. title: '木槿',
  69. name: 'mauve',
  70. color: '#9c26b0'
  71. },
  72. {
  73. title: '桃粉',
  74. name: 'pink',
  75. color: '#e03997'
  76. },
  77. {
  78. title: '棕褐',
  79. name: 'brown',
  80. color: '#a5673f'
  81. },
  82. {
  83. title: '玄灰',
  84. name: 'grey',
  85. color: '#8799a3'
  86. },
  87. {
  88. title: '草灰',
  89. name: 'gray',
  90. color: '#aaaaaa'
  91. },
  92. {
  93. title: '墨黑',
  94. name: 'black',
  95. color: '#333333'
  96. },
  97. {
  98. title: '雅白',
  99. name: 'white',
  100. color: '#ffffff'
  101. },
  102. ]
  103. },
  104. onShow: function() {
  105. console.log('App Show')
  106. },
  107. onHide: function() {
  108. console.log('App Hide')
  109. }
  110. }
  111. </script>
  112. <style>
  113. @import "colorui/main.css";
  114. @import "colorui/icon.css";
  115. .nav-list {
  116. display: flex;
  117. flex-wrap: wrap;
  118. padding: 0px 40upx 0px;
  119. justify-content: space-between;
  120. }
  121. .nav-li {
  122. padding: 30upx;
  123. border-radius: 12upx;
  124. width: 45%;
  125. margin: 0 2.5% 40upx;
  126. background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
  127. background-size: cover;
  128. background-position: center;
  129. position: relative;
  130. z-index: 1;
  131. }
  132. .nav-li::after {
  133. content: "";
  134. position: absolute;
  135. z-index: -1;
  136. background-color: inherit;
  137. width: 100%;
  138. height: 100%;
  139. left: 0;
  140. bottom: -10%;
  141. border-radius: 10upx;
  142. opacity: 0.2;
  143. transform: scale(0.9, 0.9);
  144. }
  145. .nav-li.cur {
  146. color: #fff;
  147. background: rgb(94, 185, 94);
  148. box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
  149. }
  150. .nav-title {
  151. font-size: 32upx;
  152. font-weight: 300;
  153. }
  154. .nav-title::first-letter {
  155. font-size: 40upx;
  156. margin-right: 4upx;
  157. }
  158. .nav-name {
  159. font-size: 28upx;
  160. text-transform: Capitalize;
  161. margin-top: 20upx;
  162. position: relative;
  163. }
  164. .nav-name::before {
  165. content: "";
  166. position: absolute;
  167. display: block;
  168. width: 40upx;
  169. height: 6upx;
  170. background: #fff;
  171. bottom: 0;
  172. right: 0;
  173. opacity: 0.5;
  174. }
  175. .nav-name::after {
  176. content: "";
  177. position: absolute;
  178. display: block;
  179. width: 100upx;
  180. height: 1px;
  181. background: #fff;
  182. bottom: 0;
  183. right: 40upx;
  184. opacity: 0.3;
  185. }
  186. .nav-name::first-letter {
  187. font-weight: bold;
  188. font-size: 36upx;
  189. margin-right: 1px;
  190. }
  191. .nav-li text {
  192. position: absolute;
  193. right: 30upx;
  194. top: 30upx;
  195. font-size: 52upx;
  196. width: 60upx;
  197. height: 60upx;
  198. text-align: center;
  199. line-height: 60upx;
  200. }
  201. .text-light {
  202. font-weight: 300;
  203. }
  204. @keyframes show {
  205. 0% {
  206. transform: translateY(-50px);
  207. }
  208. 60% {
  209. transform: translateY(40upx);
  210. }
  211. 100% {
  212. transform: translateY(0px);
  213. }
  214. }
  215. @-webkit-keyframes show {
  216. 0% {
  217. transform: translateY(-50px);
  218. }
  219. 60% {
  220. transform: translateY(40upx);
  221. }
  222. 100% {
  223. transform: translateY(0px);
  224. }
  225. }
  226. </style>

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论