vue 移动端加载更多分页组件_vue2.0 移动端，下拉刷新，上拉加载更多插件

最新推荐文章于 2024-07-24 14:58:19 发布

weixin_39723010

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量363

点赞数

文章标签： vue 移动端加载更多分页组件

本文链接：https://blog.csdn.net/weixin_39723010/article/details/111742100

版权

本文介绍了如何在Vue2.0移动端应用中实现加载更多和分页功能。组件包括下拉刷新和上拉加载更多的交互，通过设置props如offset、enableInfinite和enableRefresh等进行配置，并提供了onRefresh和onInfinite两个回调函数以处理刷新和加载更多数据的操作。此外，还展示了对应的CSS样式以实现滚动效果。

摘要由CSDN通过智能技术生成

下拉更新

松开更新

更新中

加载中……

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,

startY:0,

touching:false,

infiniteLoading:false}

methods: {

touchStart(e) {this.startY = e.targetTouches[0].pageYthis.startScroll = this.$el.scrollTop || 0

this.touching = true},

touchMove(e) {if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {return}

let diff= e.targetTouches[0].pageY - this.startY - this.startScrollif (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(e) {if (!this.enableRefresh) return

this.touching = false

if (this.state === 2) { //in refreshing

this.state = 2

this.top = this.offsetreturn}if (this.top >= this.offset) { //do refresh

this.refresh()

}else { //cancel refresh

this.state = 0

this.top = 0}

refresh() {this.state = 2

this.top = this.offsetthis.onRefresh(this.refreshDone)

refreshDone() {this.state = 0

this.top = 0},

infinite() {this.infiniteLoading = true

this.onInfinite(this.infiniteDone)

infiniteDone() {this.infiniteLoading = false},

onScroll(e) {if (!this.enableInfinite || this.infiniteLoading) {return}

let outerHeight= this.$el.clientHeight

let innerHeight= this.$el.querySelector('.inner').clientHeight

let scrollTop= this.$el.scrollTop

let ptrHeight= this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0let infiniteHeight= this.$el.querySelector('.load-more').clientHeight

let bottom= innerHeight - outerHeight - scrollTop -ptrHeightif (bottom < infiniteHeight) this.infinite()

}

position: absolute;

top:2.5rem;

right:0;

bottom:0;

left:0;

overflow: auto;-webkit-overflow-scrolling: touch;

background-color: #ddd

}

.yo-scroll .inner {

position: absolute;