search

博客列表 >对colorui-uiapp的初步使用201013

对colorui-uiapp的初步使用201013

小辰
小辰原创
2020年10月13日 16:51:551465浏览

写在前面

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

下面是一些干货

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

上一条：PHP 不充分的密码哈希下一条：盒子模型属性简写和em与rem应用的场景
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多