How to use the seamless scrolling component of vue-seamless-scroll
Today, I would like to share with you the relevant knowledge points about how to use the seamless scrolling components of vue-seamless-scroll. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.
Effect figure 1:
download
Cnpm I-S vue-seamless-scroll
Introduced into main.js:
Import VueSeamlessScroll from 'vue-seamless-scroll'Vue.use (VueSeamlessScroll)
Use:
{{item.title}}: {{item.time}} export default {props: {}, data () {return {listData: [{title: "Zhang San", time: "2021-08-09",}, {title: "Li Si", time: "2021-08-09" }, {title: "Wang Wu", time: "2021-08-09",}, {title: "Zhao Liu", time: "2021-08-09",}, {title: "first Seven", time: "2021-08-09",} {title: "Sun Ba", time: "2021-08-09",},],} }, computed: {seamlessScrollOption () {return {step: 0.2, / / the higher the number, the faster the scrolling speed is limitMoveNum: 2, / / the amount of data to start scrolling seamlessly this.dataList.length hoverStop: true, / / whether to enable mouse hover stop direction: 1, / / 0 up 1 up 2 left 3 right openWatch: true / / enable data real-time monitoring to refresh dom singleHeight: 0, / / height of single-step stop (default 0 is seamless non-stop scrolling) direction = > 0 singleWidth: 0, / / width of single-step stop (default 0 is seamless non-stop rolling) direction = > 2 waitTime: 1000, / / time of single-step stop (default 1000ms)} },},}
Effect figure 2:
Computed: {seamlessScrollOption () {return {step: 0.5, / / the larger the number, the faster the scrolling speed is hoverStop: true, / / whether to enable mouse hover stop direction: 0, / 0 down 1 up 2 left 3 right openWatch: true, / / enable data real-time monitoring refresh dom singleHeight: 40 / / height at which single-step motion stops (default 0 is seamless non-stop rolling) direction = > 0tick 1 singleWidth: 0, / / width of single-step motion stop (default value 0 is seamless non-stop rolling) direction = > 2 step 3 waitTime: 2000, / / time for single-step motion to stop (default 1000ms)} },}, this is all the content of the article "how to use the seamless scrolling components of vue-seamless-scroll". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
