Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to achieve seamless scrolling effect based on vue-seamless-scroll, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to achieve seamless scrolling effect based on vue-seamless-scroll. Let's take a look.

1. Install vue-seamless-scroll

Npm install vue-seamless-scroll-save

2. Introduce components

Global introduction added in main.js

Import scroll from 'vue-seamless-scroll'Vue.use (scroll)

Local introduction of components

Import vueSeamlessScroll from 'vue-seamless-scroll'components: {vueSeamlessScroll}

3. Configuration parameters

/ / the listening attribute is similar to the data concept computed: {defaultOption () {return {step: 0.2, / / the higher the value, the faster the scrolling speed limitMoveNum: 2, / / the amount of data that starts to scroll seamlessly this.dataList.length hoverStop: true / / whether to enable mouse hover stop direction: 1, / / 0 downward 1 upward 2 left 3 right openWatch: true, / / enable data real-time monitoring refresh dom singleHeight: 0, / / height of single-step movement stop (default 0 is seamless non-stop scrolling) direction = > 0ram 1 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)},

4. Complete example code

{{item.title}}: {{item.time}} import vueSeamlessScroll from 'vue-seamless-scroll' export default {name:' Example3', data () {/ / data return {listData: []} is stored here / / the components introduced by import need to be injected into the object to use components: {vueSeamlessScroll}. / / the listening property is similar to the data concept computed: {defaultOption () {return {step: 1 / / the higher the number, the faster the scrolling speed limitMoveNum: 2, / / the amount of data to start seamlessly scrolling this.dataList.length hoverStop: true, / / whether to enable mouse hover stop direction: 1, / / 0 1 up 1 up 3 left 3 right openWatch: true / / enable data real-time monitoring to refresh dom singleHeight: 0, / / height at which single-step movement stops (default value 0 is seamless non-stop scrolling) direction = > 0 max 1 singleWidth: 0 / / width of single-step stop (default 0 is seamless non-stop scrolling) direction = > 2pm 3 waitTime: 1000 / / time of single-step stop (default 1000ms)}, / / method collection methods: {} / / Monitoring data changes in data watch: {}, / / Lifecycle-created (you can access the current this instance) created () {}, / / Lifecycle-Mount completed (you can access DOM elements) mounted () {for (let I = 0) I < 15; iScroll +) {let j = {title:' seamless scroll number ah -'+ I, time: '2020-04-10'} this.listData.push (j)}} / / @ import url () Introduce the public css class. Page-example3 {width: 400px; height: 200px; overflow: hidden; border: 1px solid # 283dff; .ul-scoll {li {margin: 6px; padding: 5px; background: rgba (198,142,226,0.4) This is the end of the article on "how to achieve seamless scrolling based on vue-seamless-scroll". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve seamless scrolling effect based on vue-seamless-scroll". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.