vue使用bounty实现数字滚动效果

在项目中需要实现数字滚动效果，查找资料后首先使用了countTo但是countTo只支持数字滚动，不支持字符串，需要设置一个开始数字跟结束数字，比如开始数字0，结束数字100那滚动效果就是0,1,2,3,4.....100，这样的话如果结束数字很小，那就会滚动的非常慢，效果很不好，然后找到了bounty，这个可以支持字符串滚动，而且滚动效果很好，很炫酷,一下链接可以查看效果。

https://javascript.ctolib.com/odoojs.html

下面说说在vue中怎么使用

首先运行命令npm install --save bounty安装bounty

然后import导入import bounty from "bounty";

然后在export里注入

export default {
  components: {
    bounty,
  },

然后就可以用啦

const cancle = bounty({ el: ".js-odoo", value: "99" });//js-odoo是class名

这样就可以滚动最后展示出99，滚动时间大概3秒，滚动时间应该可以调我暂时没研究了。

执行cancle()还可以停止滚动效果，可以配合setTimeout一起使用。

需要注意的是滚动效果完成后实际是H5的svg图片，需要加样式的话还得调svg样式，如果需要清除svg内容我这里使用的是jQuery