Dieses Mal zeige ich Ihnen, wie Sie das mobile Vue2.0-Terminal bedienen, um Pull-Down-Aktualisierung und Pull-Up-Laden zu implementieren. Down-Refresh und Pull-Up-Laden, das ist ein praktischer Fall, schauen wir uns das an. Gehen Sie direkt zum Code, wenn Sie ihn nicht verstehen. Ich werde Ihnen unten erklären, wie Sie ihn verwenden.
<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>Nach dem Login kopieren
Kopieren Sie die obige Komponente, speichern Sie sie als Komponente mit dem Suffix .vue, fügen Sie sie unter Ihre Komponente ein und führen Sie sie dann auf der Seite ein
Ich habe zitiert: Es gibt Kommentare, bitte hinterlassen Sie mir eine Nachricht, wenn Sie Fragen haben!
<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>Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Wie man JS verwendet, um die absolute Position von DOM-Elementen zu ermitteln
Wofür sind die Spezifikationen? Vue-Frontend-Entwicklung
Das obige ist der detaillierte Inhalt vonSo bedienen Sie das mobile Vue2.0-Terminal, um Pulldown-Aktualisierung und Pullup-Laden zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
