怎么用javascript实现移动端的上拉下拉更新

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

共2个回答

懂视网时间：2022-05-15 02:56

这次给大家带来移动端怎样做出上拉下滑刷新加载，移动端做出上拉下滑刷新加载的注意事项有哪些，下面就是实战案例，一起来看一下。

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

<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>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

使用beforeEnter钩子函数（附代码）

怎样使用js操作图片转为base64

热心网友时间：2022-05-15 00:04

首先理解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。
clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。
offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内部的高度，包括可见部分及以滚动条下面的不可见部分。
scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。
举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是1000px（即offsetHeight为1000）。那么，可见部分我们看到400px，1000px的内容中还有600px不可见。而这不可见的部分呢，正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动，此时scrollTop为0，如果你把滚动条拉到底，显示出列表最下面的部分，此时，scrollTop为600。　所以scrollTop的取值区间为[0, 600]。　所以这个600可以理解为滚动条可以滚动的长度。
理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。
首先，我们拉动滚动条，从最上面拉到最下面，变化的是scrollTop的值，而这个值是有一个区间的。
这个区间是：[0, (offsetHeight - clientHeight)]
即，滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。
1、判断滚动条滚动到最底端：scrollTop == (offsetHeight – clientHeight)
2、在滚动条距离底端50px以内：(offsetHeight – clientHeight) – scrollTop <= 50
3、在滚动条距离底端5%以内：scrollTop / (offsetHeight – clientHeight) >= 0.95
如上。
如果要实现拉到底部自动加载内容。只要注册个滚动条事件：

[javascript] view plain copy
scrollBottomTest =function(){
$("#contain").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可见高度
contentH =$(this).get(0).scrollHeight,//内容高度
scrollTop =$(this).scrollTop();//滚动高度
//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
// 这里加载数据..
}
});
}