mobile-frame-h5-example/pages/componentsC/countTo/index.vue

<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"
						:bold="bold"
						@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 :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">目标值</view>
				<u-subsection :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">滚动时间</view>
				<u-subsection current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">显示小数</view>
				<u-subsection current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">字体加粗</view>
				<u-subsection current="1" :list="['是', '否']" @change="boldChange"></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
			bold: false
		};
	},
	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;
		},
		boldChange(index) {
			this.bold = !!!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;
}
</style>