The project needs to use pull-up refresh and pull-down load, so I manually implemented a component:
<template>
<div class="my-scroll" :class="[scrollState?'prohibit':'allow']" ref="myScroll" @scroll.passive="onScroll($event)" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" >
<div class="scroll-top" :style="{height:top+'px'}">
<div v-if="aspect==2">
<p v-if="state==6"> Drop down refresh </p> <p v-if="state==1">
<i><img :src="Load"/></ I >< br/> Refresh </p> <p v-if="state==2"</p> <p v-if="state==3">
<i><img :src="Load"/></ I >< br/> Refresh complete </p> </div> </div> <! -- top --> <div class="scroll-list" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)'}">
<slot name='scrollList'></slot>
<div class="scroll-bottom">
<div v-if="state==4"</div> <div v-if="state==5"</div> <div v-if="state==7"> no more < / div > < / div > < / div > < / div > < / template > < scripttype="text/javascript">
import tween from '@/plugins/tween'
import Load from '@/assets/Load.gif'
export default {
name:'myScroll',
props:{
'page': {type:Object, //counter: current page pageStart: start page pageEnd: end page total: total page},'onRefresh':{// Refresh callbacktype:Function,
require:true
},
'onPull':{// load callbacktype:Function,
require:true
},
'getScrollTop':{// Get the scroll bar positiontype:Function
},
'setScrollPage':{// Change the scroll bar positiontype:Function
},
'scrollState':{// whether it can slidetype:Boolean,
require:true}},data() {return{ Load, pageX:0, pageY:0, state:0, scrollPosition:0, myScroll:null, myScrollList:null, top:0, aspect:0, ListHeight :0,}},created(){}, methods:{ScrollTop(top){this.myscroll. ScrollTop = top}, /* * 5 * drop down refresh: 6 * No more: 7 */setState(index){// Change the State this. State = indexif(index == 5||index == 3){
setTimeout(()=>{
this.state = 0
let timer = null;
let that = this;
var b=50,c=100,d=100,t=0;
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn() {
var oTop = that.top;
if(that. Top >0) {that. Top = math.ceil (tween.quart.easeinout (10,oTop,8,10)) -15 timer = requestAnimationFrame(fn); }else{ cancelAnimationFrame(timer); that.top = 0 } }); },500)}}, touchStart(e){// Touch event this.pagex = e.gettouches [0].pagex = e.gettouches [0].pagey}, TouchMove (e){this.scrollPosition = this.myscrollTopif(this.scrollState&& e.Gettouches [0].pagey > this.pagey){// Swipe up this.aspect = 2if(this.myScroll.scrollTop==0){
letDiff = e.gettouches [0].pagey-this.pagey-this.scrollPosition this.top = math.pow (diff, 0.9)letRanget = diff/document. Body. ClientHeight * 100 / / calculate how much sliding on the screenif(ranget > 20){
this.state = 2
}else if(ranget < 15){
this.state = 6
}
e.preventDefault()
}
}else if(this.scrollState&&this.state! =4){// Swipe up this.aspect = 1}}, touchEnd(e){if(this aspect = = 2 && enclosing state = = 2 | | this. State = = 1) {/ / pull handle on this. Top = 100 this. State = 1 this. TopCallback ()}else if(this.aspect == 2){
this.state = 0
this.top = 0
}
},
onScroll(e){
letListHeight = this. MyScrollList. Total height offsetHeight / / listletListScrollTop = e. arget. ScrollTop + this. MyScroll. OffsetHeight / / the current scroll positionif(this.state == 0&&listHeight-listScrollTop < 100){
this.bottomCallback()
}
if(this.getScrollTop)this.getScrollTop(e.target.scrollTop) // Return X, Y},topCallback(){// refresh callback this.onrefresh (this.state)},bottomCallback(){// load the callbackif(this.state ! = 7){ this.state = 4 this.onPull(this.state) } }, },mounted(){
this.myScroll = this.$refs.myScroll // get slider dom this.myscrollList = this.myscroll.children [1] // get list dom}} </script> <style lang="scss" scoped>
.allow{
overflow:hidden;
height: auto;
}
.prohibit{
max-width: 100%;
max-height: 100%;
height: 100%;
overflow:hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: transform;
transition: all 450ms;
backface-visibility: hidden;
perspective: 1000;
}
.my-scroll{
position: relative;
color: #fff;.scroll-top{ text-align: center; display:flex; position:absolute; top:0; left:0; width:100%; overflow: hidden; div{ display:flex; height:auto; width:100%; justify-content: center; align-items:center; flex-wrap: wrap; i{ flex:1 0 100%; display:block; Height: 0.4 rem; } img {width: 0.6 rem; } p{ flex:1 0 100%; } } } .scroll-list{ overflow:hidden; min-height: 100%; } .scroll-bottom{ text-align: center; line-height: 40px; } } </style>Copy the codeUse:
<template>
<div class="index">
<my-scroll ref="myScroll" :page="page" :on-refresh="onRefresh" :on-pull="onPull" :get-scroll-top="getTop">
<div slot="scrollList">
<ul>
<li v-for="(x,index) in list" :key="index"List > < / li > < / ul > < / div > < / my - scroll > < / div > < / template > < scripttype="text/javascript">
import myScroll from '@/components/myScroll.vue'
export default {
data() {return{list:[], page:{counter:1, pageStart:1, pageEnd:1, total:10},}}, methods:{onRefresh(MUN){// Refresh callbacksetTimeout(()=>{
this.$refs.myScroll.setState(3); },500)}, onPull(mun){// load callbackif(this.page.counter<=this.page.total){
setTimeout(()=>{
this.page.counter++
this.$refs.myScroll.setState(5)
for(leti=0; i<10; i++){ this.listdata.push({}) } },500) }else{
this.$refs.myScroll. SetState (7)}}, getTop(y) {// Scrollbar position},}, components:{myScroll},created(){
},
mounted() {for(leti=0; i<1*50; i++){ this.list.push({}) } }, } </script> <style lang="scss" scoped>
.index{
}
</style>
Copy the codeThe implementation idea of pull-up refresh is as follows: 1. Obtain the coordinate 2 of the user’s first click through TouchStart. 4. Determine whether the scroll bar of the list is at the top 5. Then judge the sliding scale of the screen for state display drop-down loading implementation idea: 1. Pull down loading is realized by judging the position of the scroll bar
Style:
Note: slow algorithm and tween) js from www.cnblogs.com/cloudgamer/… The details are here
Github address: github.com/FZliweilian…