Scrollspy Uikit 3 框架和计数答案

【问题标题】：Scrollspy Uikit 3 framework and count upScrollspy Uikit 3 框架和计数
【发布时间】：2021-06-03 23:10:59
【问题描述】：

我是前端的初学者，javascript 对我来说很难 :( 我想用没有 jquery https://getuikit.com/docs/scrollspy 的组件 scrollspy uikit 3 来计算数字我做了这样的，但它不起作用

<span id="number"></span>
    <script>
        UIkit.scrollspy('#number', 'inview', function () {
            const countUp = new CountUp('number', 0, 1000 );
            countUp.start();
        });
    </script>

【问题讨论】：

标签： uikit counter scrollspy getuikit

【解决方案1】：

我为此创建了一个脚本。

var util = UIkit.util;
var el = util.$('#heading');
var textIndex = 0;
UIkit.scrollspy(el, {repeat: true, delay: 100});
  
util.on(el,'inview', function (){
 function counter( start, end, duration) {
  let current = start,
   range = end - start,
   increment = end > start ? 1 : -1,
   step = Math.abs(Math.floor(duration / range)),
   timer = setInterval(() => {
    current += increment;
    el.textContent = current;
    if (current == end) {
     clearInterval(timer);
    }
   }, step);
 }
  counter(0, 100, 3000);
});

util.on(el, 'outview', function(){
  el.textContent = 0;
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.22/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.22/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.22/dist/js/uikit-icons.min.js"></script>

<section class="uk-section uk-section-primary" uk-height-viewport="offset-top: true">
  <div class="uk-container">
    <div class="uk-text-center">
    <h1 >SECTION 1</h1>
      <a href="https://codepen.io/bilashism/pen/mZpZLx" target="_blank">Source Code for Number Increment</a>
    </div>
    <div class="uk-text-center uk-margin-medium-top">
      <a class="uk-link-reset" href="#section" uk-scroll>Scroll</a>
    </div>
  </div>
</section>
<section class="uk-section uk-section-secondary" id="section">
  <div class="uk-container">
    <h1 class="uk-text-center" id="heading">0</h1>
  </div>
</section>

您需要监听inview 和outview 事件。方法如下：

UIkit.util.on(element, 'event', function(){
   //your code will be here here
});

【讨论】：

谢谢@gurkan :)
不客气。也谢谢你的好意:)