Question

如何在Yii2中正确使用CountUp.js库？我已经在AppAsset中添加了它，并在View中正确加载了它，现在我将分配使用lib和在同一视图中显示的数字

AppAsset.php

<?php
namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        'css/custom-bootstrap.css',
        'css/font-awesome-4.7.0/css/font-awesome.css',          
    ];
    public $js = [
        'js/countup.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

有人可以给我一个在视图中使用的例子吗？

Answer 1

如果您将JavaScript的库版本用于countUp.js，则需要使用配置参数创建CountUp(target, startVal, endVal, decimals, duration, options)的新实例，然后调用instance.start();来启动计数器。

参数：

target =发生计数的html元素，输入，svg文本元素的ID或先前选择的元素/输入的变量

startVal =您要开始的值

endVal =您想要获得的值

decimals =（可选）数字中的小数位数，默认为0

duration =（可选）持续时间（以秒为单位），默认为2

options =（可选，请参见演示）格式化/缓和选项对象

我假设您已经注册了上述AppAsset类，并且已加载源库，否则请在下面的视图顶部取消注释countUp.js的CDN链接，复制以下视图并运行它

<?php
    use yii\web\View;

    //$this->registerJsFile('//cdn.jsdelivr.net/npm/countup@1.8.2/dist/countUp.min.js');

    $js = <<<JS
    var options = {
      useEasing: true,
      useGrouping: true,
      separator: ',',
      decimal: '.',
    };
    var demo = new CountUp('counter', 0, 5220, 0, 2.5, options);
    if (!demo.error) {
      demo.start();
    } else {
      console.error(demo.error);
    }
JS;
    $this->registerJs($js, View::POS_END);

?>

<div id="counter">

</div>

在Yii2上使用lib CountUp.js

1 个答案:

参数：