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

it2022-05-05  275

在项目中需要实现数字滚动效果,查找资料后首先使用了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


最新回复(0)