代码拉取完成，页面将自动刷新
A simple, Seamless scrolling for Vue.js
🐾online demo | 🌾 sample demo | 📘 中文文档
Update logBrowser supportFeaturesInstallationUsage
ConfigureEventsIndividual special configuration itemsChangelogIssues solutionCaresContributionBug fix
Configuration update
IE |
Firefox |
Chrome |
Safari |
iOS |
Android |
|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ |
npm install vue-seamless-scroll --save
https://cdn.jsdelivr.net/npm/vue-seamless-scroll@1.1.17/dist/vue-seamless-scroll.min.js
// **main.js**
// 1.global install
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//or you can set componentName default componentName is vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
// 2.single .vue import
<script>
import vueSeamless from 'vue-seamless-scroll'
export default {
components: {
vueSeamless
}
}
</script>
Example:
Specific reference test/test.html
<html>
<head>
...
</head>
<body>
<div id="app">
<vue-seamless-scroll></vue-seamless-scroll>
</div>
<script src="vue.js"></script>
<script src="vue-seamless-scroll"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
| key | description | default | val |
|---|---|---|---|
step |
the faster the rolling speed is faster | 1 |
Number |
limitMoveNum |
start seamless scrolling minimum data length | 5 |
Number |
hoverStop |
mouse hover control is enabled | true |
Boolean |
direction |
0 down、 1 up 、 2 left 、 3 right | 1 |
Number |
openTouch |
open mobile touch | true |
Boolean |
singleHeight |
one single stop height(default zero is seamless) => direction 0/1 | 0 |
Number |
singleWidth |
one single stop width(default zero is seamless) => direction 2/3 | 0 |
Number |
waitTime |
one single data stop wait time(ms) | 1000 |
Number |
switchOffset |
the left and right buttons distance from the left and right sides (px) | 30 |
Number |
autoPlay |
Less than 1.1.17 version needs to be set to false when manually switching | true |
Boolean |
switchSingleStep |
the size of a single step switch (px) | 134 |
Number |
switchDelay |
the animation time of a single step switch(ms) | 400 |
Number |
switchDisabledClass |
the className of the switch parent element that cannot be clicked | disabled |
String |
isSingleRemUnit |
singleHeight and singleWidth Whether to enable the rem metric | false |
Boolean |
| key | description | default | val |
|---|---|---|---|
navigation |
Whether the left and right scrolling shows the controller button, autoPlay automatically becomes false when true | false |
Boolean |
| name | description | calback params |
|---|---|---|
ScrollEnd |
A roll-through callback event | null |
1.The outermost container needs to be set manually
width height overflow:hidden
2.The left and right seamless rolling needs to be set for the main content area (that is, the default slot slots)
css width(otherwise, the actual width cannot be calculated correctly). You can also set it todisplay:flex;without setting thecss widthproperty.
3.The step value is not recommended to be too small, otherwise there will be carton effect.(If single-step scrolling is set, the step needs to be a divisor of the single-step size, otherwise the position of the single-step scrolling end cannot be guaranteed to be accurate. ~~~~~, such as single step 30, step can not be 4)
4.You need to set when you need to manually switch left and right to scroll
autoPlay:false(Starting with version 1.1.17, you only need to setnavigation:false),(The loop is not currently supported.)
5.Provides
slot left-switch || right-switchyou can freely define the button styles you want. The outer div is positioned in the middle,the distance from both sides can be adjusted by the switchOffset parameter.
6.When the button reaches the boundary position, it automatically adds a definition to the state button that cannot be clicked.
switchDisabledClass: 'disabled',you can configure it as needed.
See the GitHub release history.
If you want js to scroll seamlessly (without dependencies) you can switch to here.seamscroll。
Welcome to give some Suggestions and optimizations, and look forward to your Pull Request.
vue-seamless-scroll is open source and released under the MIT License.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
