Supports up-pull loading based on vue2 and vue2

Supports up-pull loading based on vue2 and vue2

The examples in this article share with you the specific code of the vue2 implementation pull-up display for your reference. The specific content is as follows:

Because swiper is also used in our project. Many of them are slide switches, but they can be pulled and loaded again. As a result, many UI frameworks, which we use, all have different bugs and there is no way to solve them. At last we wrote one. The Code is as follows (this is used in many places, so it is recommended to put it under components/common ):

<Template> <div class = "loadmore"> <slot> </slot> <slot name = "bottom"> </slot> </div> </template> <style >. loadmore {width: 100% ;}</style> <script> export default {name: 'loadmore', props: {maxDistance: {type: Number, default: 0}, autoFill: {type: Boolean, default: true}, distanceIndex: {type: Number, default: 2}, bottomPullText: {type: String, default: 'pull up refresh '}, bottomDropText: {type: String, Default: 'release Update'}, bottomLoadingText: {type: String, default: 'loading... '}, bottomDistance: {type: Number, default: 70}, bottow.hod: {type: Function}, bottomAllLoaded: {type: Boolean, default: false},}, data () {return {// div's displacement translate: 0 at the bottom, // select the scrollEventTarget: null, containerFilled: false, bottomText :'', // class name bottomDropped: false, // gets the scrollTop botto MReached: false, // slide direction down --- downward interaction; up --- move up ction: '', startY: 0, startScrollTop: 0, // real-time clientY position currentY: 0, topStatus: '', // pull-up loading status'' pull: pull-up bottomStatus: '', };}, watch: {// change the current loading status to bottomStatus (val) {this. $ emit ('bottom-status-change', val); switch (val) {case 'pull ': this. bottomText = this. bottomPullText; break; case 'drop': this. bottomText = this. bottomDropText; break; Case 'loading': this. bottomText = this. bottomLoadingText; break ;}}, methods: {onBottomLoaded () {this. bottomStatus = 'pull '; this. bottomDropped = false; this. $ nextTick () =>{ if (this. scrollEventTarget === window) {document. body. scrollTop + = 50;} else {this. scrollEventTarget. scrollTop + = 50;} this. translate = 0 ;}); // comment if (! This. bottomAllLoaded &&! This. containerFilled) {this. fillContainer () ;}}, getScrollEventTarget (element) {let currentNode = element; while (currentNode & currentNode. tagName! = 'Html '& currentNode. tagName! = 'Body' & currentNode. nodeType = 1) {let overflowY = document. defaultView. getComputedStyle (currentNode ). overflowY; if (overflowY = 'scroll '| overflowY = 'auto') {return currentNode;} currentNode = currentNode. parentNode;} return window;}, // obtain scrollTop getScrollTop (element) {if (element = window) {return Math. max (window. pageYOffset | 0, document.doc umentElement. scrollTop);} e Lse {return element. scrollTop ;}, bindTouchEvents () {this. $ el. addEventListener ('touchstart', this. handleTouchStart); this. $ el. addEventListener ('touchmove ', this. handleTouchMove); this. $ el. addEventListener ('touchend', this. handleTouchEnd);}, init () {this. bottomStatus = 'pull '; // select the listener object of the rolling event this. scrollEventTarget = this. getScrollEventTarget (this. $ el); if (typeof this. bottow.hod = 'functi On ') {// this. fillContainer (); // bind the slide event this. bindTouchEvents () ;}}, // implement annotation fillContainer () {if (this. autoFill) {this. $ nextTick () =>{ if (this. scrollEventTarget === window) {this. containerFilled = this. $ el. getBoundingClientRect (). bottom> = document.doc umentElement. getBoundingClientRect (). bottom;} else {this. containerFilled = this. $ el. getBoundingClientRect (). Bottom> = this. scrollEventTarget. getBoundingClientRect (). bottom;} if (! This. containerFilled) {this. bottomStatus = 'loading'; this. bottow.hod () ;}}) ;}}, // gets the scrollTop checkBottomReached () {if (this. scrollEventTarget = window) {return document. body. scrollTop + document.doc umentElement. clientHeight> = document. body. scrollHeight;} else {// getBoundingClientRect is used to obtain the position of an element on the page relative to the browser window from the left, top, right, and bottom. Right refers to the distance between the right boundary of an element and the leftmost of the window. bottom refers to the distance between the bottom boundary of an element and the top of the window. Return this. $ el. getBoundingClientRect (). bottom <= this. scrollEventTarget. getBoundingClientRect (). bottom + 1 ;}}, // ontouchstart event handleTouchStart (event) {// obtain the y coordinate of the start point this. startY = event. touches [0]. clientY; this. startScrollTop = this. getScrollTop (this. scrollEventTarget); this. bottomReached = false; if (this. bottomStatus! = 'Loading') {this. bottomStatus = 'pull '; this. bottomDropped = false ;}}, // ontouchmove event handleTouchMove (event) {if (this. startY <this. $ el. getBoundingClientRect (). top & this. startY> this. $ el. getBoundingClientRect (). bottom) {// It does not scroll within the range to be rolled, and no longer listens to scroll return;} // real-time clientY position this. currentY = event. touches [0]. clientY; // the difference between the distance position and the start position distanceIndex --- let distance = (this. currentY -This. startY)/this. distanceIndex; // determine the sliding direction based on distance and assign the variable direction down --- downward interaction; up --- slide up this. direction = distance> 0? 'Drop': 'up'; if (this. direction = 'up') {// gets the scrollTop this of the listening scroll element. bottomReached = this. bottomReached | this. checkBottomReached ();} if (typeof this. bottow.hod === 'function' & this. direction = 'up' & this. bottomReached & this. bottomStatus! = 'Loading '&&! This. bottomAllLoaded) {// There is a loading function, which is pulled up, with a rolling distance, not loading ajax, not loaded to the last page event. preventDefault (); event. stopPropagation (); if (this. maxDistance> 0) {this. translate = Math. abs (distance) <= this. maxDistance? This. getScrollTop (this. scrollEventTarget)-this. startScrollTop + distance: this. translate;} else {this. translate = this. getScrollTop (this. scrollEventTarget)-this. startScrollTop + distance;} if (this. translate> 0) {this. translate = 0;} this. bottomStatus =-this. translate> = this. bottomDistance? 'Drop': 'pull ';}}, // ontouchend event handleTouchEnd () {if (this. direction = 'up' & this. bottomReached & this. translate <0) {this. bottomDropped = true; this. bottomReached = false; if (this. bottomStatus = 'drop') {this. translate = '-50'; this. bottomStatus = 'loading'; this. bottow.hod ();} else {this. translate = '0'; this. bottomStatus = 'pull ';} this. direction = ''; }}, mounted () {this. init () ;}}; </script>

Next, you can import the required page: import LoadMore from '../common/loadmore. vue'; the method for introducing this page is as follows:

<Template> <section class = "finan"> <! -- Pull up and load more --> <load-more: bottom-method = "loadBottom": bottom-all-loaded = "allLoaded": bottomPullText = 'bottomtext ': auto-fill = "false" @ bottom-status-change = "handleBottomChange" ref = "loadmore"> <div> here you need to write another module </div> <div v-show = "loading" slot = "bottom" class = "loading"> This div displays a loaded gif image  </div> </load-more> </section> </template>

Then set the data and methods on this page as follows:

Export default {name: 'internalgroup', props: {}, data () {return {// pull up and load data scrollHeight: 0, scrollTop: 0, containerHeight: 0, loading: false, allLoaded: false, bottomText: 'pull up to load more... ', bottomStatus: '', pageNo: 1, totalCount:'', }}, methods: {/* drop-down load */_ scroll: function (ev) {ev = ev | event; this. scrollHeight = this. $ refs. innerScroll. scrollHeight; this. scrollTop = this. $ refs. innerScroll. scrollTop; this. containerHeight = this. $ refs. innerScroll. offsetHeight;}, loadBottom: function () {this. loading = true; this. pageNo + = 1; // The number of pages loaded each time if (this. pageNo = this. totalGetCount) {// when allLoaded = true, this is stopped by pulling and loading. loading = false; this. allLoaded = true;} api. commonApi (backend interface, request parameter) this api is encapsulated by axios. If you do not understand it, see the article vue2 + vuex + axios. then (res => {setTimeout () => {write the data returned from the background to be used in setTimeout this. $ nextTick () => {this. loading = false;})}, 1000)};}, handleBottomChange (status) {this. bottomStatus = status ;},}

This completes.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.