javascript - 在 Yii2 上使用 lib CountUp.js

Question

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

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',
    ];
}

有人能给我一个在 View 中使用的示例吗？

Answer 1

如果您使用 countUp.js 库的 javascript 版本，则需要创建 CountUp(target, startVal, endVal, 小数, 持续时间, options) 的新实例 使用配置参数，然后调用 instance.start(); 启动计数器。

参数:

• target = id of html element, input, svg text element, or var of previously selected element/input where counting occurs
• startVal = the value you want to begin at
• endVal = the value you want to arrive at
• decimals = (optional) number of decimal places in number, default 0
• duration = (optional) duration in seconds, default 2
• options = (optional, see demo) formatting/easing options object

Read More

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

<?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>