vue移動(dòng)端下拉刷新和上滑加載
本文實(shí)例為大家分享了vue移動(dòng)端下拉刷新和上滑加載的具體代碼,供大家參考,具體內(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, // 開(kāi)始滑動(dòng)時(shí),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: { // 觸摸開(kāi)始(手指放在觸摸屏上) touchStart(e) { if(window.pageYOffset > 0) return if(!this.enableRefresh) return this.startY = e.targetTouches[0].pageY this.startScroll = this.$el.scrollTop || 0 //開(kāi)啟滑動(dòng)記錄 this.touching = true }, // 拖動(dòng)(手指在觸摸屏上移動(dòng)) touchMove(e) { // 這里控制是否可以上下拉 代表正在滑動(dòng) if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) { return } // 獲取拉取的間隔差 當(dāng)前移動(dòng)的y點(diǎn) 初始的y點(diǎn) 初始頂部距離 let diff = e.targetTouches[0].pageY - this.startY - this.startScroll //如果是往上滑的話,就取消事件 if (diff > 0) e.preventDefault() // 對(duì)狀態(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é)束(手指從觸摸屏上移開(kāi)) 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() } } }, // 滾動(dòng)條在Y軸上的滾動(dòng)距離 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"> <!-- 頁(yè)面內(nèi)容 --> </scrollRefresh>
<script> // 引入組件 import scrollRefresh from '@/components/scrollRefresh' export default { components: { scrollRefresh } } </script>
- refresh 下拉刷新時(shí)調(diào)用的方法
- load 上滑加載時(shí)調(diào)用的方法
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue記住滾動(dòng)條和實(shí)現(xiàn)下拉加載的完美方法
- vue實(shí)現(xiàn)歌手列表字母排序下拉滾動(dòng)條側(cè)欄排序?qū)崟r(shí)更新
- vue 監(jiān)聽(tīng)某個(gè)div垂直滾動(dòng)條下拉到底部的方法
- vue使用mint-ui實(shí)現(xiàn)下拉刷新和無(wú)限滾動(dòng)的示例代碼
- vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載,同時(shí)具有l(wèi)oading效果(推薦)
- 基于vue的下拉刷新指令和滾動(dòng)刷新指令
- vue實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀑布流 + 下拉刷新 + 上拉加載更多(步驟詳解)
- vue實(shí)現(xiàn)下拉加載其實(shí)沒(méi)那么復(fù)雜
- vueScroll實(shí)現(xiàn)移動(dòng)端下拉刷新、上拉加載
- vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新
- 如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件
- Vue實(shí)現(xiàn)下拉滾動(dòng)加載數(shù)據(jù)的示例
相關(guān)文章
基于vue-element組件實(shí)現(xiàn)音樂(lè)播放器功能
這篇文章主要介紹了基于vue-element組件實(shí)現(xiàn)音樂(lè)播放器功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-05-05vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
vue如何簡(jiǎn)單的實(shí)現(xiàn)彈框,遮罩,點(diǎn)擊其他區(qū)域關(guān)閉彈框, 簡(jiǎn)單的思路是以一個(gè)div作為遮罩,這篇文章給大家詳細(xì)介紹了vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹,感興趣的朋友一起看看吧2018-09-09vue3+vite動(dòng)態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動(dòng)態(tài)加載路由,本地路由和線上路由匹配方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法
Vite項(xiàng)目中我們可以手動(dòng)將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2023-04-04Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12Vue如何實(shí)現(xiàn)分頁(yè)功能代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue如何實(shí)現(xiàn)分頁(yè)功能的相關(guān)資料,Vue分頁(yè)功能的實(shí)現(xiàn)需要前端和后端共同配合完成,文中通過(guò)代碼實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09詳解vee-validate的使用個(gè)人小結(jié)
本篇文章主要介紹了詳解vee-validate的使用個(gè)人小結(jié),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-06-06