vue移动端下拉切换页面_vue移动端下拉刷新和上滑加载

本文实例为大家分享了vue移动端下拉刷新和上滑加载的具体代码，供大家参考，具体内容如下

组件

@touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">

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

}

// 获取拉取的间隔差 当前移动的y点 初始的y点 初始顶部距离

let diff = e.targetTouches[0].pageY - this.startY - this.startScroll

//如果是往上滑的话，就取消事件

if (diff > 0) e.preventDefault()

// 对状态进行处理，看是否处于刷新中

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

}

},

// 触摸结束(手指从触摸屏上移开)

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

}

}

}

.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);

}

}

应用组件

// 引入组件

import scrollRefresh from '@/components/scrollRefresh'

export default {

components: {

scrollRefresh

}

}

refresh 下拉刷新时调用的方法

load 上滑加载时调用的方法

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持随便开发网。