代码提交
This commit is contained in:
‘tuzi0421
BIN
components/.DS_Store
vendored
Normal file
BIN
components/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
components/chocolate-progress-bar/.DS_Store
vendored
Normal file
BIN
components/chocolate-progress-bar/.DS_Store
vendored
Normal file
Binary file not shown.
123
components/chocolate-progress-bar/chocolate-progress-bar.vue
Normal file
123
components/chocolate-progress-bar/chocolate-progress-bar.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<view class="progress_box">
|
||||
<canvas class="progress_bg" canvas-id="cpbg"></canvas>
|
||||
<canvas class="progress_bar" canvas-id="cpbar"></canvas>
|
||||
<view class="progress_txt">
|
||||
<view class="progress_info">{{ progress_txt }}%</view>
|
||||
<text class="progress_title">{{title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
progress_txt:{
|
||||
type: Number,
|
||||
default:0
|
||||
},
|
||||
title:{
|
||||
type:String,
|
||||
default: ''
|
||||
},
|
||||
width:{
|
||||
type:Number,
|
||||
defauit:''
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
defauit:''
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.drawProgressbg();
|
||||
this.drawCircle(this.progress_txt); //参数为1-100
|
||||
this.style(this.width,this.height);
|
||||
},
|
||||
methods: {
|
||||
style:function(width,height){
|
||||
// console.log(width,height)
|
||||
// document.getElementById("cpbg").style.width = width+"px";
|
||||
// cpbgA.style.width = width+"px";
|
||||
// cpbgA.style.height = height+"px";
|
||||
// var cpbarA = document.getElementById("cpbar");
|
||||
// cpbarA.style.width = width+"px";
|
||||
// cpbarA.style.height = height+"px";
|
||||
},
|
||||
drawProgressbg: function() {
|
||||
// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
|
||||
var ctx = uni.createCanvasContext('cpbg', this);
|
||||
ctx.setLineWidth(6); // 设置圆环的宽度
|
||||
ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
|
||||
ctx.setLineCap('round'); // 设置圆环端点的形状
|
||||
ctx.beginPath(); //开始一个新的路径
|
||||
ctx.arc(110, 110, 70, 0.75 * Math.PI, 0.25 * Math.PI, false);
|
||||
//设置一个原点(110,110)，半径为100的圆的路径到当前路径
|
||||
ctx.stroke(); //对当前路径进行描边
|
||||
ctx.draw();
|
||||
},
|
||||
drawCircle: function(step) {
|
||||
var ctx = uni.createCanvasContext('cpbar', this);
|
||||
// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
|
||||
var gradient = ctx.createLinearGradient(28, 55, 192, 55);
|
||||
gradient.addColorStop('0', '#009688');
|
||||
// gradient.addColorStop('1.0', '#FF3B1D');
|
||||
ctx.setLineWidth(6);
|
||||
ctx.setStrokeStyle(gradient);
|
||||
ctx.setLineCap('round');
|
||||
ctx.beginPath();
|
||||
// 参数step 为绘制的百分比
|
||||
step = 0.015 * step + 0.75;
|
||||
if (step >= 2) {
|
||||
step = step % 2;
|
||||
}
|
||||
ctx.arc(110, 110, 70, 0.75 * Math.PI, step * Math.PI, false);
|
||||
ctx.stroke();
|
||||
ctx.draw();
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.progress_box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.progress_bg {
|
||||
position: absolute;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
.progress_bar {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
.progress_txt {
|
||||
position: absolute;
|
||||
font-size: 28upx;
|
||||
color: #999999;
|
||||
}
|
||||
.progress_info {
|
||||
font-size: 36upx;
|
||||
padding-left: 16upx;
|
||||
letter-spacing: 2upx;
|
||||
font-size: 52upx;
|
||||
color: #fff;
|
||||
}
|
||||
.progress_titleP{
|
||||
color: #BFBFBF;
|
||||
}
|
||||
.progress_dot {
|
||||
width: 16upx;
|
||||
height: 16upx;
|
||||
border-radius: 50%;
|
||||
background-color: #fb9126;
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
<!-- 针对中间的导航栏 通过true来判断控制类名和样式 -->
|
||||
<view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)" :key="index">
|
||||
<view class="item-top">
|
||||
<image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
|
||||
<image :src="currentItem == item.id ? item.selectIcon:item.icon"></image>
|
||||
</view>
|
||||
<!-- 通过三元判断控制类名 达到控制选中和未选中的样式 -->
|
||||
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
|
||||
@ -31,8 +31,8 @@ export default {
|
||||
{
|
||||
id: 0,
|
||||
path: '/pages/index/index',
|
||||
icon: '/static/logo.png',
|
||||
selectIcon: '/static/logo.png',
|
||||
icon: '/static/indexB.png',
|
||||
selectIcon: '/static/indexA.png',
|
||||
text: '首页',
|
||||
centerItem: false
|
||||
},
|
||||
@ -48,8 +48,8 @@ export default {
|
||||
{
|
||||
id: 2,
|
||||
path: '/pages/person/person',
|
||||
icon: '/static/logo.png',
|
||||
selectIcon: '/static/logo.png',
|
||||
icon: '/static/personA.png',
|
||||
selectIcon: '/static/personB.png',
|
||||
text: '我的',
|
||||
centerItem: false
|
||||
}
|
||||
@ -58,13 +58,9 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.currentItem = this.currentPage
|
||||
// 隐藏原来的tabBar导航栏
|
||||
uni.hideTabBar()
|
||||
},
|
||||
methods: {
|
||||
changeItem (item) {
|
||||
let _this = this
|
||||
//_this.currentItem = item.id;
|
||||
uni.switchTab({
|
||||
url: item.path
|
||||
})
|
||||
@ -89,7 +85,7 @@ view {
|
||||
align-items: center;
|
||||
padding: 5rpx 0;
|
||||
color: #999999;
|
||||
|
||||
background: #131E3B;
|
||||
/* 针对tabbar的统一处理 */
|
||||
.tabbar-item {
|
||||
width: 33.33%;
|
||||
|
||||
94
components/progressBar.vue
Normal file
94
components/progressBar.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<!-- style="height: 3.5rem; margin: 0 1em;" -->
|
||||
<view>
|
||||
<view class="line-total" :style="'width: ' + (val / total * 100) + '%'">
|
||||
<text class="line-data">
|
||||
{{val}}%
|
||||
</text>
|
||||
</view>
|
||||
<view style="position: relative;bottom: 10px;">
|
||||
<view class="line-base"></view>
|
||||
<view class="line-blue" :style="'width: ' + (val / total * 100) + '%'"></view>
|
||||
</view>
|
||||
<!-- <view class="line-val">
|
||||
<text>{{title}}</text>
|
||||
<text>{{total}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'progressBar',
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
// 标题
|
||||
title: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
total: {
|
||||
type: [Number],
|
||||
default: 0
|
||||
},
|
||||
val: {
|
||||
type: [Number],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-total {
|
||||
color: #67C23A;
|
||||
text-align: right;
|
||||
font-size: 25rpx;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
|
||||
}
|
||||
.line-data{
|
||||
color: #fff;
|
||||
padding: 1px 3px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #FFF;
|
||||
background: var(--color-warning, #67C23A);
|
||||
width: 30px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.line-base {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 8px;
|
||||
background: rgba(128, 136, 142, 0.40);
|
||||
}
|
||||
.line-blue {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 6px;
|
||||
border-radius: 10px;
|
||||
background: #67C23A;
|
||||
}
|
||||
.line-val {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #7e7e7e;
|
||||
font-size: 25rpx;
|
||||
font-weight: 50px;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user