vue移動端下拉刷新和上滑加載
更新時間:2020年10月27日 08:10:31 作者:搬磚的小白
這篇文章主要為大家詳細(xì)介紹了vue移動端下拉刷新和上滑加載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue移動端下拉刷新和上滑加載的具體代碼,供大家參考,具體內(nèi)容如下
組件
<template> <div class="mu-load-more" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)"> <div class="mu-refresh-control" v-if="!isNaN(top) && top !== 0" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }"> <svg-icon icon-class="gengxin" class="mu-refresh-svg-icon" v-if="state === 0 || state === 1" :style="{ transform: 'rotate(' + (top * 2) + 'deg)' }"></svg-icon> </div> <div class="mu-refresh-control son" v-if="state === 2" :style="{ 'margin-top': marginTop + 'px' }"> <svg-icon icon-class="jianchagengxin" class="mu-refresh-svg-icon refresh" v-if="state === 2"></svg-icon> </div> <slot></slot> </div> </template> <script> export default { props: { offset: { type: Number, default: 40 }, enableInfinite: { type: Boolean, default: true }, enableRefresh: { type: Boolean, default: true }, onRefresh: { type: Function, default: undefined, required: false }, onInfinite: { type: Function, default: undefined, require: false } }, data() { return { top: 0, state: 0, // 開始滑動時,y軸位置 startY: 0, startScroll: 0, touching: false, infiniteLoading: false, refreshShow: true, infiniteState: true, showLoad: false, marginTop: 0 } }, created(){ if(this.enableRefresh === false) { this.refreshShow = false } window.addEventListener('scroll', this.onScroll) }, destroyed () { window.removeEventListener('scroll', this.onScroll) }, methods: { // 觸摸開始(手指放在觸摸屏上) touchStart(e) { if(window.pageYOffset > 0) return if(!this.enableRefresh) return this.startY = e.targetTouches[0].pageY this.startScroll = this.$el.scrollTop || 0 //開啟滑動記錄 this.touching = true }, // 拖動(手指在觸摸屏上移動) touchMove(e) { // 這里控制是否可以上下拉 代表正在滑動 if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) { return } // 獲取拉取的間隔差 當(dāng)前移動的y點 初始的y點 初始頂部距離 let diff = e.targetTouches[0].pageY - this.startY - this.startScroll //如果是往上滑的話,就取消事件 if (diff > 0) e.preventDefault() // 對狀態(tài)進(jìn)行處理,看是否處于刷新中 this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0) if (this.state === 2) { // in refreshing return } if (this.top >= this.offset) { this.state = 1 } else { this.state = 0 } }, // 觸摸結(jié)束(手指從觸摸屏上移開) touchEnd() { if (!this.enableRefresh) return this.touching = false if (this.state === 2) { this.state = 2 this.top = 0 return } if (this.top >= this.offset) { this.refresh() } else { this.state = 0 this.top = 0 } }, refresh() { this.marginTop = this.top this.state = 2 this.top = 0 this.onRefresh(this.refreshDone) }, refreshDone() { this.state = 0 this.top = 0 this.marginTop = 0 }, infinite() { this.infiniteLoading = true this.onInfinite(this.infiniteDone) }, infiniteDone(length) { const self = this if(length === 0) { self.infiniteState = false } this.showLoad = false self.infiniteLoading = false }, onScroll() { if (this.onInfinite) { let scrollTop = this.getScrollTop() let scrollHeight = this.getScrollHeight() let windowHeight = this.getWindowHeight() if (scrollTop + windowHeight === scrollHeight) { this.showLoad = true this.infinite() } } }, // 滾動條在Y軸上的滾動距離 getScrollTop() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0 if (document.body) { bodyScrollTop = document.body.scrollTop } if (document.documentElement) { documentScrollTop = document.documentElement.scrollTop } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop return scrollTop }, // 文檔的總高度 getScrollHeight() { var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0 if (document.body) { bodyScrollHeight = document.body.scrollHeight; } if (document.documentElement) { documentScrollHeight = document.documentElement.scrollHeight; } scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight return scrollHeight }, // 瀏覽器視口的高度 getWindowHeight() { var windowHeight = 0 if (document.compatMode === 'CSS1Compat') { windowHeight = document.documentElement.clientHeight } else { windowHeight = document.body.clientHeight } return windowHeight } } } </script> <style lang="scss" scoped> .mu-load-more { position: relative; overflow: hidden; } .mu-refresh-control { display: flex; margin: 0 auto; width: 80px; height: 80px; color: #2196f3; align-items: center; justify-content: center; background-color: #FFF; border-radius: 50%; -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); position: absolute; left: 50%; margin-left: -38px; margin-top: 24px; z-index: 90; } .mu-refresh-svg-icon { display: inline-block; width: 20px; height: 20px; fill: currentColor; } .refresh { -webkit-transform: rotate(360deg); animation: rotation 1s linear infinite; -moz-animation: rotation 1s linear infinite; -webkit-animation: rotation 1s linear infinite; -o-animation: rotation 1s linear infinite; } @-webkit-keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .son { position: absolute; animation: lightAni 1s linear 1; } @keyframes lightAni { 0% { transform: translateY(0); } 50% { transform: translateY(-50px); } 100% { transform: translateY(-100px); } } </style>
應(yīng)用組件
<scrollRefresh :on-refresh="refresh" :on-infinite="load"> <!-- 頁面內(nèi)容 --> </scrollRefresh>
<script> // 引入組件 import scrollRefresh from '@/components/scrollRefresh' export default { components: { scrollRefresh } } </script>
- refresh 下拉刷新時調(diào)用的方法
- load 上滑加載時調(diào)用的方法
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue記住滾動條和實現(xiàn)下拉加載的完美方法
- vue實現(xiàn)歌手列表字母排序下拉滾動條側(cè)欄排序?qū)崟r更新
- vue 監(jiān)聽某個div垂直滾動條下拉到底部的方法
- vue使用mint-ui實現(xiàn)下拉刷新和無限滾動的示例代碼
- vue實現(xiàn)ajax滾動下拉加載,同時具有l(wèi)oading效果(推薦)
- 基于vue的下拉刷新指令和滾動刷新指令
- vue實現(xiàn)網(wǎng)絡(luò)圖片瀑布流 + 下拉刷新 + 上拉加載更多(步驟詳解)
- vue實現(xiàn)下拉加載其實沒那么復(fù)雜
- vueScroll實現(xiàn)移動端下拉刷新、上拉加載
- vue插件mescroll.js實現(xiàn)移動端上拉加載和下拉刷新
- 如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件
- Vue實現(xiàn)下拉滾動加載數(shù)據(jù)的示例
相關(guān)文章
基于vue-element組件實現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實現(xiàn)音樂播放器功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-05-05vue實現(xiàn)彈框遮罩點擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
vue如何簡單的實現(xiàn)彈框,遮罩,點擊其他區(qū)域關(guān)閉彈框, 簡單的思路是以一個div作為遮罩,這篇文章給大家詳細(xì)介紹了vue實現(xiàn)彈框遮罩點擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹,感興趣的朋友一起看看吧2018-09-09vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12