uniapp——使⽤colorUI、⾃定义顶部导航栏、漂亮的卡⽚时间列表（包括
⼩程序时间列表）
⼀、使⽤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>
三、pages.json 配置取消系统导航栏
"globalStyle":{
"navigationStyle":"custom"
},
四、在main.js 引⼊ cu-custom 组件。
import cuCustom from './colorui/components/cu-custom.vue' Vueponent('cu-custom',cuCustom)
page.vue 页⾯可以直接调⽤了
<cu-custom bgColor="bg-gradual-blue":isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom>
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;
js导航栏下拉菜单
margin:20upx;
border-radius:15upx;
}
.
view_3 {
width:100vw;
height:60upx
}
.img_icon_small{
margin:0upx 20upx;
width:25upx;
height:25upx;
}
</style>
⼆、使⽤colorUI的⾃定义顶部导航
1、导⼊colorUI
参考上⾯提到的步骤
2、在app.vue的onLaunch导⼊如下代码
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 + p - 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、页⾯代码
<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、导⼊colorUI
参考上⾯提到的步骤
2、代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。