Skip to content

U
uview-ui
Commit c61a470d authored by 王博文's avatar 王博文
Browse files
Options

加入字体粗细

parent 633c7ed8
Hide whitespace changes
Inline Side-by-side
Showing with 351 additions and 300 deletions
pages/componentsC/countTo/index.vue
View file @ c61a470d
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<view class="u-no-demo-here">
如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明
</view>
<view class="count-to-demo">
<u-count-to class="count-to" :useEasing="useEasing" ref="uCountTo" :autoplay="autoplay"
:startVal="startVal" :endVal="endVal" :duration="duration" :decimals="decimals"
@end="end"></u-count-to>
</view>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">目标值</view>
<u-subsection vibrateShort :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">滚动时间</view>
<u-subsection vibrateShort current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示小数</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
</view>
</view>
</view>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<view class="u-no-demo-here">如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明</view>
<view class="count-to-demo">
<u-count-to
class="count-to"
:useEasing="useEasing"
ref="uCountTo"
:autoplay="autoplay"
:startVal="startVal"
:endVal="endVal"
:duration="duration"
:decimals="decimals"
:fontWeight="fontWeight"
@end="end"
></u-count-to>
</view>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection
vibrateShort
:current="current"
:list="['启动', '暂停', '继续', '重置']"
@change="statusChange"
></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">目标值</view>
<u-subsection vibrateShort :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">滚动时间</view>
<u-subsection vibrateShort current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示小数</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">字体加粗</view>
<u-subsection
vibrateShort
current="1"
:list="['normal', 'bold', 'bolder','lighter']"
@change="fontWidthChange"
></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
startVal: 0,
endVal: 608,
separator: ',',
decimals: 0,
duration: 2000,
autoplay: false,
useEasing: true,
current: 3,
isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN
};
},
methods: {
endValChange(index) {
this.endVal = index == 0 ? 608 : index == 1 ? 5604 : 45617;
this.reset();
this.start();
},
durationChange(index) {
this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000;
},
decimalsChange(index) {
this.decimals = index == 0 ? 2 : 0;
},
statusChange(index) {
this.current = index;
if(index == 0) {
this.start();
} else if(index == 1) {
this.stop();
} else if(index == 2){
this.resume();
} else {
this.reset();
}
},
end() {
this.current = 3;
this.$refs.uToast.show({
type: 'warning',
title: '滚动结束'
})
},
start() {
this.current = 0;
this.isStop = true;
this.$refs.uCountTo.start();
},
stop() {
this.$refs.uCountTo.stop();
},
resume() {
if(!this.isStop) {
this.$refs.uToast.show({
type: 'error',
title: '请开始并暂停后才能继续'
})
this.$nextTick(() => {
this.current = 3;
})
return ;
}
this.$refs.uCountTo.resume();
},
reset() {
this.$refs.uCountTo.reset();
}
}
data() {
return {
startVal: 0,
endVal: 608,
separator: ",",
decimals: 0,
duration: 2000,
autoplay: false,
useEasing: true,
current: 3,
isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN
fontWeight: 400
};
},
methods: {
endValChange(index) {
this.endVal = index == 0 ? 608 : index == 1 ? 5604 : 45617;
this.reset();
this.start();
},
durationChange(index) {
this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000;
},
fontWidthChange(index) {
let arr = ["normal", "bold", "bolder", "lighter"];
this.fontWeight = arr[index];
},
decimalsChange(index) {
this.decimals = index == 0 ? 2 : 0;
},
statusChange(index) {
this.current = index;
if (index == 0) {
this.start();
} else if (index == 1) {
this.stop();
} else if (index == 2) {
this.resume();
} else {
this.reset();
}
},
end() {
this.current = 3;
this.$refs.uToast.show({
type: "warning",
title: "滚动结束"
});
},
start() {
this.current = 0;
this.isStop = true;
this.$refs.uCountTo.start();
},
stop() {
this.$refs.uCountTo.stop();
},
resume() {
if (!this.isStop) {
this.$refs.uToast.show({
type: "error",
title: "请开始并暂停后才能继续"
});
this.$nextTick(() => {
this.current = 3;
});
return;
}
this.$refs.uCountTo.resume();
},
reset() {
this.$refs.uCountTo.reset();
}
}
};
</script>
<style lang="scss" scoped>
.count-to-demo {
text-align: center;
text-align: center;
}
</style>
uview/components/u-count-to/u-count-to.vue
View file @ c61a470d
<template>
<view class="u-count-num" :style="{
<view
class="u-count-num"
:style="{
fontSize: fontSize + 'rpx',
fontWeight:fontWeight,
color: color
}">
{{ displayValue }}
</view>
}"
>{{ displayValue }}</view>
</template>
<script>
export default {
props: {
// 开始的数值，默认从0增长到某一个数
startVal: {
type: [Number, String],
default: 0
},
// 要滚动的目标数值，必须
endVal: {
type: [Number, String],
default: 0,
required: true
},
// 滚动到目标数值的动画持续时间，单位为毫秒（ms）
duration: {
type: [Number, String],
default: 2000
},
// 设置数值后是否自动开始滚动
autoplay: {
type: Boolean,
default: true
},
// 要显示的小数位数
decimals: {
type: [Number, String],
default: 0
},
// 是否在即将到达目标数值的时候，使用缓慢滚动的效果
useEasing: {
type: Boolean,
default: true
},
// 十进制分割
decimal: {
type: [Number, String],
default: '.'
},
// 字体颜色
color: {
type: String,
default: '#303133'
},
// 字体大小
fontSize: {
type: [Number, String],
default: 50
},
// 千位分隔符，类似金额的分割(￥23,321.05中的",")
separator: {
type: String,
default: ''
},
},
data() {
return {
localStartVal: this.startVal,
displayValue: this.formatNumber(this.startVal),
printVal: null,
paused: false, // 是否暂停
localDuration: Number(this.duration),
startTime: null, // 开始的时间
timestamp: null, // 时间戳
remaining: null, // 停留的时间
rAF: null,
lastTime: 0 // 上一次的时间
};
},
computed: {
countDown() {
return this.startVal > this.endVal;
}
},
watch: {
startVal() {
this.autoplay && this.start();
},
endVal() {
this.autoplay && this.start();
}
},
mounted() {
this.autoplay && this.start();
},
methods: {
easingFn(t, b, c, d) {
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
},
requestAnimationFrame(callback) {
const currTime = new Date().getTime();
// 为了使setTimteout的尽可能的接近每秒60帧的效果
const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
const id = setTimeout(() => {
callback(currTime + timeToCall);
}, timeToCall);
this.lastTime = currTime + timeToCall;
return id;
},
props: {
// 开始的数值，默认从0增长到某一个数
startVal: {
type: [Number, String],
default: 0
},
// 要滚动的目标数值，必须
endVal: {
type: [Number, String],
default: 0,
required: true
},
// 滚动到目标数值的动画持续时间，单位为毫秒（ms）
duration: {
type: [Number, String],
default: 2000
},
// 设置数值后是否自动开始滚动
autoplay: {
type: Boolean,
default: true
},
// 要显示的小数位数
decimals: {
type: [Number, String],
default: 0
},
// 是否在即将到达目标数值的时候，使用缓慢滚动的效果
useEasing: {
type: Boolean,
default: true
},
// 十进制分割
decimal: {
type: [Number, String],
default: "."
},
// 字体颜色
color: {
type: String,
default: "#303133"
},
// 字体大小
fontSize: {
type: [Number, String],
default: 50
},
// 字体粗细
fontWeight: {
type: [Number, String],
default: 400
},
// 千位分隔符，类似金额的分割(￥23,321.05中的",")
separator: {
type: String,
default: ""
}
},
data() {
return {
localStartVal: this.startVal,
displayValue: this.formatNumber(this.startVal),
printVal: null,
paused: false, // 是否暂停
localDuration: Number(this.duration),
startTime: null, // 开始的时间
timestamp: null, // 时间戳
remaining: null, // 停留的时间
rAF: null,
lastTime: 0 // 上一次的时间
};
},
computed: {
countDown() {
return this.startVal > this.endVal;
}
},
watch: {
startVal() {
this.autoplay && this.start();
},
endVal() {
this.autoplay && this.start();
}
},
mounted() {
this.autoplay && this.start();
},
methods: {
easingFn(t, b, c, d) {
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
},
requestAnimationFrame(callback) {
const currTime = new Date().getTime();
// 为了使setTimteout的尽可能的接近每秒60帧的效果
const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
const id = setTimeout(() => {
callback(currTime + timeToCall);
}, timeToCall);
this.lastTime = currTime + timeToCall;
return id;
},
cancelAnimationFrame(id) {
clearTimeout(id);
},
// 开始滚动数字
start() {
this.localStartVal = this.startVal;
this.startTime = null;
this.localDuration = this.duration;
this.paused = false;
this.rAF = this.requestAnimationFrame(this.count);
},
// 暂定状态，重新再开始滚动；或者滚动状态下，暂停
reStart() {
if (this.paused) {
this.resume();
this.paused = false;
} else {
this.stop();
this.paused = true;
}
},
// 暂停
stop() {
this.cancelAnimationFrame(this.rAF);
},
// 重新开始(暂停的情况下)
resume() {
this.startTime = null;
this.localDuration = this.remaining;
this.localStartVal = this.printVal;
this.requestAnimationFrame(this.count);
},
// 重置
reset() {
this.startTime = null;
this.cancelAnimationFrame(this.rAF);
this.displayValue = this.formatNumber(this.startVal);
},
count(timestamp) {
if (!this.startTime) this.startTime = timestamp;
this.timestamp = timestamp;
const progress = timestamp - this.startTime;
this.remaining = this.localDuration - progress;
if (this.useEasing) {
if (this.countDown) {
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
} else {
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
}
} else {
if (this.countDown) {
this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
} else {
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
}
}
if (this.countDown) {
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
} else {
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
}
this.displayValue = this.formatNumber(this.printVal);
if (progress < this.localDuration) {
this.rAF = this.requestAnimationFrame(this.count);
} else {
this.$emit('end');
}
},
// 判断是否数字
isNumber(val) {
return !isNaN(parseFloat(val));
},
formatNumber(num) {
num = num.toFixed(Number(this.decimals));
num += '';
const x = num.split('.');
let x1 = x[0];
const x2 = x.length > 1 ? this.decimal + x[1] : '';
const rgx = /(\d+)(\d{3})/;
if (this.separator && !this.isNumber(this.separator)) {
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + this.separator + '$2');
}
}
return x1 + x2;
},
destroyed() {
this.cancelAnimationFrame(this.rAF);
}
}
cancelAnimationFrame(id) {
clearTimeout(id);
},
// 开始滚动数字
start() {
this.localStartVal = this.startVal;
this.startTime = null;
this.localDuration = this.duration;
this.paused = false;
this.rAF = this.requestAnimationFrame(this.count);
},
// 暂定状态，重新再开始滚动；或者滚动状态下，暂停
reStart() {
if (this.paused) {
this.resume();
this.paused = false;
} else {
this.stop();
this.paused = true;
}
},
// 暂停
stop() {
this.cancelAnimationFrame(this.rAF);
},
// 重新开始(暂停的情况下)
resume() {
this.startTime = null;
this.localDuration = this.remaining;
this.localStartVal = this.printVal;
this.requestAnimationFrame(this.count);
},
// 重置
reset() {
this.startTime = null;
this.cancelAnimationFrame(this.rAF);
this.displayValue = this.formatNumber(this.startVal);
},
count(timestamp) {
if (!this.startTime) this.startTime = timestamp;
this.timestamp = timestamp;
const progress = timestamp - this.startTime;
this.remaining = this.localDuration - progress;
if (this.useEasing) {
if (this.countDown) {
this.printVal =
this.localStartVal -
this.easingFn(
progress,
0,
this.localStartVal - this.endVal,
this.localDuration
);
} else {
this.printVal = this.easingFn(
progress,
this.localStartVal,
this.endVal - this.localStartVal,
this.localDuration
);
}
} else {
if (this.countDown) {
this.printVal =
this.localStartVal -
(this.localStartVal - this.endVal) *
(progress / this.localDuration);
} else {
this.printVal =
this.localStartVal +
(this.endVal - this.localStartVal) *
(progress / this.localDuration);
}
}
if (this.countDown) {
this.printVal =
this.printVal < this.endVal ? this.endVal : this.printVal;
} else {
this.printVal =
this.printVal > this.endVal ? this.endVal : this.printVal;
}
this.displayValue = this.formatNumber(this.printVal);
if (progress < this.localDuration) {
this.rAF = this.requestAnimationFrame(this.count);
} else {
this.$emit("end");
}
},
// 判断是否数字
isNumber(val) {
return !isNaN(parseFloat(val));
},
formatNumber(num) {
num = num.toFixed(Number(this.decimals));
num += "";
const x = num.split(".");
let x1 = x[0];
const x2 = x.length > 1 ? this.decimal + x[1] : "";
const rgx = /(\d+)(\d{3})/;
if (this.separator && !this.isNumber(this.separator)) {
while (rgx.test(x1)) {
x1 = x1.replace(rgx, "$1" + this.separator + "$2");
}
}
return x1 + x2;
},
destroyed() {
this.cancelAnimationFrame(this.rAF);
}
}
};
</script>
<style lang="scss" scoped>
.u-count-num {
display: inline-block;
text-align: center;
display: inline-block;
text-align: center;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment