ホームページ > 記事 > ウェブフロントエンド > Vueのシームレススクロールコンポーネントの詳しい説明
Vueのシームレススクロールコンポーネントの詳しい説明
- 小云云オリジナル
- 2017-12-18 16:18:342688ブラウズ
この記事では、Vue のシームレス スクロール コンポーネントについて詳しく説明します。私は、Vue のシームレス スクロール コンポーネントを素晴らしいもので見つけたことがありませんでした。私は、誰もが一緒に学び、進歩できることを願って、コンポーネントを作成して共有しました。
インストール
NPM
npm install vue-seamless-scroll --save
使用方法
ES6
以下のes6の使用にはwebpack環境のコンパイルが必要です。
詳細はexample-src/App.vueを参照
import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
new Vue({
components: {
vueSeamlessScroll
}
})
通常モード(scriptタグ)
例:
詳細はtest/test.htmlを参照してください
<html>
<head>
...
</head>
<body>
<p id="app">
<vue-seamless-scroll></vue-seamless-scroll>
</p>
<script src="vue.js"></script>
<script src="vue-seamless-scroll"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
Configure
defaultOption () {
return {
step: 1, //步长 越大滚动速度越快
limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length
hoverStop: true, //是否启用鼠标hover控制
direction: 1, //1 往上 0 往下
openWatch: true, //开启data实时监听
singleHeight: 0, //单条数据高度有值hoverStop关闭
waitTime: 1000 //单步停止等待时间
}
}
TKS
vue-simless-scroll バグや不備を見つけた場合は、良いと感じたらスターを付けてください。 、星を付けます。
関連する推奨事項: page_jquery で動的データのスクロール効果を実現する
jquery スクロール コンポーネント (vticker.js)
スクロール バーの位置判断に基づく簡単な例_javascript スキル
以上がVueのシームレススクロールコンポーネントの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。