How to implement a scrolling loading component in Vue.js

This article mainly introduces "how to achieve a scrolling loading component in Vue.js". In daily operation, I believe many people have doubts about how to achieve a scrolling loading component in Vue.js. Xiaobian consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "how to achieve a scrolling loading component in Vue.js". Next, please follow the editor to study!

Component code

/ / scrollLoader.vue// scroll loading component. Container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;} .loading {width: 100%; height: 40px; position: relative; overflow: hidden; text-align: center; margin: 5px 0; color: # 999; font-size: 13px;}. Loading-icon {color: # 707070;}; .loader {font-size: 10px; margin: 8px auto; text-indent:-9999em Width: 24px; height: 24px; border-radius: 50%; background: # 999; background:-moz-linear-gradient (left, # 999 10%, rgba (255,255,255,0) 42%); background:-webkit-linear-gradient (left, # 999 10%, rgba (255,255,255,0) 42%); background:-o-linear-gradient (left, # 999 10%, rgba (255,255,255,0) 42%) Background:-ms-linear-gradient (left, # 999 10%, rgba (255,255,255,0) 42%); background: linear-gradient (to right, # 999 10%, rgba (255,255,255,0) 42%); position: relative;-webkit-animation: load3 1s infinite linear; animation: load3 1s infinite linear;} .loader: before {width: 50%; height: 50%; background: # 999 Border-radius: 100% 000; position: absolute; top: 0; left: 0; content:';} .loader: after {background: # f5f5f5; width: 72%; height: 75%; border-radius: 68%; content:''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0 @-webkit-keyframes load3 {0% {- webkit-transform: rotate (0deg); transform: rotate (0deg);} 100% {- webkit-transform: rotate (360deg); transform: rotate (360deg);}} @ keyframes load3 {0% {- webkit-transform: rotate (0deg); transform: rotate (0deg);} 100% {- webkit-transform: rotate (360deg); transform: rotate (360deg) }} loading. Loading. Export default {name: "scroll-loader", props: {/ / pass a minimum to slot Make sure that the scroll bars' minHeight': {type: Number, default: 800},}, created () {}, computed: {realMinHeight () {return this.minHeight + 30}}, data () {return {topLoading: false, bottonLoading: false, stopTopLoading: false / / whether to stop propagation scrolling to the top event stopBottonLoading: false, / / whether to stop propagation scrolling to the bottom event}}, mounted () {this.listenScroll () }, methods: {listenScroll () {var me = this; var topDone = (stopTopLoading) = > {me.topLoading = false; if (stopTopLoading) me.stopTopLoading = true;}; var bottonDone = (stopBottonLoading) = > {me.bottonLoading = false; if (stopBottonLoading) me.stopBottonLoading = true;} SetTimeout (function () {var scrollContainer = document.getElementById ('scrollLoader-container'); scrollContainer.onscroll = function () {if (scrollContainer.scrollTop= scrollContainer.scrollHeight) & &! me.stopBottonLoading) {if (me.bottonLoading) return; me.bottonLoading = true; scrollContainer.scrollTop + = 40; me.$emit (' scroll-to-botton', bottonDone) }, 50)},}} at this point, the study on "how to implement a scrolling loading component in Vue.js" is over, hoping to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!