移动端上拉刷新下拉加载事件怎么添加

发布网友发布时间：2022-04-20 03:56

共2个回答

懂视网时间：2022-05-14 23:07

本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例，内容挺不错的，现在分享给大家，也给大家做个参考。

本人正在基于 vue2.0 + webpack + es6 搭建前端架构，整理了部分插件，下面这个是下拉更新上拉更多的，挺好用的，分享给大家。

直接上代码，不懂的多看几遍，下面我换会告诉大家如何使用。

<template lang="html">
 <p class="yo-scroll"
 :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
 @touchstart="touchStart($event)"
 @touchmove="touchMove($event)"
 @touchend="touchEnd($event)"
 @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
 <section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
 <header class="pull-refresh">
 <slot name="pull-refresh">
 <span class="down-tip">下拉更新</span>
 <span class="up-tip">松开更新</span>
 <span class="refresh-tip">更新中</span>
 </slot>
 </header>
 <slot></slot>
 <footer class="load-more">
 <slot name="load-more">
 <span>加载中……</span>
 </slot>
 </footer>
 </section>
 </p>
</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,
 startY: 0,
 touching: false,
 infiniteLoading: false
 }
 },
 methods: {
 touchStart(e) {
 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
 }
 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(e) {
 if (!this.enableRefresh) return
 this.touching = false
 if (this.state === 2) { // in refreshing
 this.state = 2
 this.top = this.offset
 return
 }
 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.offset
 this.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 : 0
 let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
 let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
 if (bottom < infiniteHeight) this.infinite()
 }
 }
}
</script>
<style>
.yo-scroll {
 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;
 top: -2rem;
 width: 100%;
 transition-duration: 300ms;
}
.yo-scroll .pull-refresh {
 position: relative;
 left: 0;
 top: 0;
 width: 100%;
 height: 2rem;
 display: flex;
 align-items: center;
 justify-content: center;
}
.yo-scroll.touch .inner {
 transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
 display: block;
}
.yo-scroll.up .up-tip {
 display: block;
}
.yo-scroll.refresh .refresh-tip {
 display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
 display: none;
}
.yo-scroll .load-more {
 height: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
} 
</style>

把上面组件拷贝一下，存成后缀是.vue的组件放到你的component下，然后引入到页面 , 下面是我引用的demo

上代码：里面有注释哦，有问题给我留言！

<template>
 <p>
 <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
 <ul>
 <li v-for="(item,index) in listdata" >{{item.name}}</li>
 <li v-for="(item,index) in downdata" >{{item.name}}</li>
 </ul>
 </v-scroll>
 </p>
</template>
<script>
import Scroll from './y-scroll/scroll';

export default{
 data () {
 return {
 counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
 num : 15, // 一次显示多少条
 pageStart : 0, // 开始页数
 pageEnd : 0, // 结束页数
 listdata: [], // 下拉更新数据存放数组
 downdata: [] // 上拉更多的数据存放数组
 }
 },
 mounted : function(){
 this.getList();
 },
 methods: {
 getList(){
 let vm = this;
 vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
  vm.listdata = response.data.slice(0,15);
  }, (response) => {
  console.log('error');
 });
 },
 onRefresh(done) {
 this.getList();
 
 done() // call done
 
 },
 onInfinite(done) {
 let vm = this;
 vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
  vm.counter++;
  vm.pageEnd = vm.num * vm.counter;
  vm.pageStart = vm.pageEnd - vm.num;
  let arr = response.data;
  let i = vm.pageStart;
  let end = vm.pageEnd;
  for(; i<end; i++){
  let obj ={};
  obj["name"] = arr[i].name;
  vm.downdata.push(obj);
  if((i + 1) >= response.data.length){
  this.$el.querySelector('.load-more').style.display = 'none';
  return;
  }
  }
  done() // call done
  }, (response) => {
  console.log('error');
 });
 }
 },
 components : {
'v-scroll': Scroll
 }
}
</script>

热心网友时间：2022-05-14 20:15

注意事项： 1、XListView因为添加了Header，会导致存储的数据+1，所以赋值时需要position-1。补充：当去掉HeaderView时，position不用-1。 2、提个建议：上拉加载更多，最好在onCreate()中就执行setAdapter，然后不论是空数据、还是有数据，只用更新适配器就行了。一、XListView 1、下载 gitHub的地址。或者从这儿下。 2、用法导入图中的me.maxwin.view包提供了两个接口： IXListViewListener：触发下拉刷新，上拉加载更多。实现此接口时，onLoadMore()用来上拉加载更多，onRefresh()用来下拉刷新。 OnXScrollListener：和原生的OnScrollListener一样，但是在header/footer回滚时也会触发。几个常用方法： setPullRefreshEnable(boolean enable)：是否允许下拉刷新 setPullLoadEnable(boolean enable)：是否允许上拉加载更多 stopRefresh()：停止刷新，重置header view stopLoadMore()：停止加载更多，重置footer view 请求到数据后停止刷新停止加载更多。 setRefreshTime(String time)：设置上次刷新的时间 onLoadMore()：加载更多时调用的方法。注意第一次进入时不会调用此方法。 onRefresh()：下拉刷新时调用的方法。 3、代码中怎么体现 1）实现IXListViewListe...

首页

文章

移动端上拉刷新下拉加载事件怎么添加