uniapp

2024-07-16 04:27| 来源: 网络整理| 查看: 265

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

在这里插入图片描述

1、导入colorUI

一、下载colorUI源码解压，复制根目录的 /colorui 文件夹到你的根目录在这里插入图片描述二、App.vue 引入关键Css main.css icon.css

@import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* 你的项目css */ ....

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

"globalStyle": { "navigationStyle": "custom" },

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

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

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

返回导航栏 2、所有代码个人信息 Personal 专业：计算机学历：本科 export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } .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; } 二、使用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 } }) },

在export default { 的上一行添加：

import Vue from 'vue' 3、页面代码个人技能页面 - 2 三、时间列表

在这里插入图片描述

1、导入colorUI

参考上面提到的步骤

2、代码 2019-目前北京慧资道咨询有限公司规模：120人 JAVA开发我在里面负责技术监察，管理团队，统一调度，统一代码规范，统一指挥，团结一致 2016-2019 北京好味道咨询有限公司规模：110人 JAVA开发我在里面负责技术监察，管理团队，统一调度，统一代码规范，统一指挥，团结一致三、时间列表（微信小程序）

效果图：在这里插入图片描述 wxml

中通快递：ZT1234987777 复制打电话

【本文地址】

公司简介

联系我们