问题描述
我是前端的初学者,对我来说 javascript 很难 :( 我想使用组件 scrollspy uikit 3 计算数字而不使用 jquery https://getuikit.com/docs/scrollspy 我是这样制作的,但它不起作用
<span id="number"></span>
<script>
UIkit.scrollspy('#number','inview',function () {
const countUp = new CountUp('number',1000 );
countUp.start();
});
</script>
解决方法
我为此创建了一个脚本。
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
});