I am building a front-end architecture based on vue2.0 + webpack + es6 and sorted out some plug-ins. The following is a drop-down update. Pull-up more, which is very useful. I will share it with you.
Just upload the code and read it a few times if you don’t understand it. I will tell you how to use it below.
<template lang="html">
<div 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">Pull down update</span>
<span class="up-tip">Release update</span>
<span class="refresh-tip">Updating</span>
</slot>
</header>
<slot></slot>
<footer class="load-more">
<slot name="load-more">
<span>loading……</span>
</slot>
</footer>
</section>
</div>
</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) {
= [0].pageY
= this.$ || 0
= true
},
touchMove(e) {
if (! || this.$ > 0 || !) {
return
}
let diff = [0].pageY - -
if (diff > 0) ()
= (diff, 0.8) + ( === 2 ? : 0)
if ( === 2) { // in refreshing
return
}
if ( >= ) {
= 1
} else {
= 0
}
},
touchEnd(e) {
if (!) return
= false
if ( === 2) { // in refreshing
= 2
=
return
}
if ( >= ) { // do refresh
()
} else { // cancel refresh
= 0
= 0
}
},
refresh() {
= 2
=
()
},
refreshDone() {
= 0
= 0
},
infinite() {
= true
()
},
infiniteDone() {
= false
},
onScroll(e) {
if (! || ) {
return
}
let outerHeight = this.$
let innerHeight = this.$('.inner').clientHeight
let scrollTop = this.$
let ptrHeight = ? this.$('.pull-refresh').clientHeight : 0
let infiniteHeight = this.$('.load-more').clientHeight
let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
if (bottom < infiniteHeight) ()
}
}
}
</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;
}
. .inner {
transition-duration: 0ms;
}
. .down-tip {
display: block;
}
. .up-tip {
display: block;
}
. .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>
Copy the above component, save it as the suffix of .vue and put it under your component, and then introduce it to the page. Below is the demo I quoted
The above code: There are comments in it, leave me a message if you have any questions!
<template>
<div>
<v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
<ul>
<li v-for="(item,index) in listdata" >{{}}</li>
<li v-for="(item,index) in downdata" >{{}}</li>
</ul>
</v-scroll>
</div>
</template>
<script>
import Scroll from './y-scroll/scroll';
export default{
data () {
return {
counter : 1, //The default 15 pieces of data have been displayed count equals one is to start loading from 16 pieces num : 15, // How many pieces are displayed at a time pageStart : 0, // Start page count pageEnd : 0, // End page count listdata: [], // Pull down to update the data storage array downdata: [] // Pull up more data to store arrays }
},
mounted : function(){
();
},
methods: {
getList(){
let vm = this;
vm.$('/repos/typecho-fans/plugins/contents/').then((response) => {
= (0,15);
}, (response) => {
('error');
});
},
onRefresh(done) {
();
done() // call done
},
onInfinite(done) {
let vm = this;
vm.$('/repos/typecho-fans/plugins/contents/').then((response) => {
++;
= * ;
= - ;
let arr = ;
let i = ;
let end = ;
for(; i<end; i++){
let obj ={};
obj["name"] = arr[i].name;
(obj);
if((i + 1) >= ){
this.$('.load-more'). = 'none';
return;
}
}
done() // call done
}, (response) => {
('error');
});
}
},
components : {
'v-scroll': Scroll
}
}
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.