In diesem Artikel wird hauptsächlich die gleitende Lademethode des Vue Mobile UI Framework vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.
Vorwort
Es gibt auch eine sehr häufige Komponente auf unserem mobilen Endgerät, die verschiebbar ist, um weitere Komponenten zu laden. Normalerweise sehen wir viele Plug-Ins, die ziemlich kompliziert zu implementieren sind, und denken, dass diese Komponente schwierig ist, aber das ist nicht der Fall! ! Diese Komponente kann tatsächlich sehr einfach implementiert werden und die Erfahrung kann sehr großartig sein (natürlich haben wir die Pulldown-Aktualisierungsfunktion nicht implementiert)! ! Lassen Sie uns diese Komponente gemeinsam implementieren.
Effektanzeige
Zuerst ein GIF-Bild, um den Effekt zu zeigen, nachdem wir ihn erstellt haben, wie folgt:
DOM-Struktur
Die Seite sollte drei Teile enthalten: 1. Textbereich 2. Chrysantheme laden und Text aufzeichnen 3. Alles laden Daten Vervollständigter Text:
<p ref="scroll" class="r-scroll">
<p class="r-scroll-wrap">
<slot></slot>
</p>
<slot name="loading">
<p v-show="isLoading" class="r-scroll-loading">
<r-loading></r-loading>
<span class="r-scroll-loading-text">{{loadingText}}</span>
</p>
</slot>
<slot name="complate">
<p v-show="isComplate" class="r-scroll-loading">{{complateText}}</p>
</slot>
</p>Nach dem Login kopieren
CSS-Stil
Der Container-R-Scroll der gesamten Komponente sollte Die Breite ist festgelegt und der überschüssige Teil kann gescrollt werden. Der Textbereich sollte automatisch mit dem Inhalt wachsen und die Chrysantheme wird unten angezeigt, wenn der Standardwert erreicht ist Der Abschlusstext zum Laden der Daten wird angezeigt:
<style lang="scss">
@mixin one-screen {
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow: hidden;
}
@mixin overflow-scroll {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.r-scroll{
@include one-screen;
@include overflow-scroll;
&-loading{
text-align: center;
padding-top: 3vw;
padding-bottom: 3vw;
font-size: 14px;
color: #656565;
line-height: 20px;
&-text{
display: inline-block;
vertical-align: middle;
}
}
}
</style>Nach dem Login kopieren
Javascript
Interaktive Logikanalyse:
Seiteninitialisierung Zu diesem Zeitpunkt erhalten Sie den gesamten Komponentenknoten und den Textcontainerknoten
Binden Sie das Bildlaufereignis an den gesamten Containerknoten
Beurteilen Sie während des Scrollvorgangs des Containers, ob der Abstand von der Oberseite kleiner als der angegebene Wert ist. Wenn er kleiner als das benutzerdefinierte Ereignis ist, laden Sie mehr
, Der Geschäftscode hört auf das Loadmore-Ereignis und lädt die Daten.
Da der Code nicht kompliziert ist, werde ich ihn nicht im Detail analysieren . Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar in den Kommentaren:
<script>
import rLoading from '../loading'
export default{
components: {rLoading},
props: {
// 距离底部数值，小于或等于该数值触发自定义事件loadmore
bottomDistance: {
type: [Number, String],
default: 70
},
// 加载中的文字
loadingText: {
type: String,
default: '加载中...'
},
// 数据加载完成的文字
complateText: {
type: String,
default: '-- 我是个有底线的列表 --'
}
},
data () {
return {
// 用来判定数据是否加载完成
isComplate: false,
// 用来判定是否正在加载数据
isLoading: false,
// 组件容器
scroll: null,
// 正文容器
scrollWrap: null
}
},
watch: {
// 监听isLoading，如果isLoading的值为true则代表触发了loadmore事件
isLoading (val) {
if (val) {
this.$emit('loadmore')
}
}
},
methods: {
// 初始化组件，获取组件容器、正文容器节点，并给组件容器节点绑定滚动事件
init () {
this.scroll = this.$refs.scroll
this.scrollWrap = this.scroll.childNodes[0]
this.scroll.addEventListener('scroll', this.scrollEvent)
this.$emit('init', this.scroll)
},
scrollEvent (e) {
// 如果数据全部加载完成了，则再也不触发loadmore事件
if (this.isComplate) return
let scrollTop = this.scroll.scrollTop
let scrollH = this.scroll.offsetHeight
let scrollWrapH = this.scrollWrap.offsetHeight
// 组件容器滚的距离 + 组件容器本身距离大于或者等于正文容器高度 - 指定数值 则触发loadmore事件
if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) {
this.isLoading = true
}
},
// 当前数据加载完成后调用该函数
loaded () {
this.isLoading = false
},
// 所有数据加载完成后调用该函数
compleate () {
this.isLoading = false
this.isComplate = true
this.scroll.removeEventListener('scroll', this.scrollEvent)
}
},
mounted () {
this.$nextTick(this.init)
}
}
</script>Nach dem Login kopieren
Außerdem wird in der Komponente auf die Ladechrysanthemenkomponente verwiesen, und a Da der Code einfach ist, werde ich ihn nicht im Detail analysieren:
Chrysantheme verwendet ein GIF-Bild. Bitte machen Sie ein Foto Ihres Lieblings-Chrysanthemen-GIF und fügen Sie es ein Unter dem Pfad von die Chrysanthemenkomponente
<template>
<p class="r-loading-container">
<img src="./loading.gif">
</p>
</template>
<script>
export default {}
</script>
<style lang="scss">
.r-loading-container{
display: inline-block;
vertical-align: middle;
img{
width: 20px;
height: 20px;
display: block;
}
}
</style>Nach dem Login kopieren
steht am Ende
Zum Schluss gibt es hier noch einen Anhang mit a Anwendungsbeispiel. :
<template>
<p class="index">
<r-scroll ref="scroll" @loadmore="queryDate">
<p class="item" v-for="(item, index) in list">{{item}}</p>
</r-scroll>
</p>
</template>
<script>
import rScroll from '../../components/scroll'
function timeout (ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done')
})
}
export default{
components: {rScroll},
data () {
return {
i: 0,
list: []
}
},
methods: {
async queryDate () {
await timeout(1000)
let i = this.i
let data = []
for (let j = 0; j < 40; j++) {
data.push(i + j)
this.i = this.i + 1
}
this.list = this.list.concat(data)
// 调用组件中的loaded函数，如果数据加载完成后记得调用组件的compleate函数
this.$refs.scroll.loaded()
}
},
mounted () {
this.queryDate()
}
}
</script>
<style lang="scss">
.item{
background-color: #f2f2f2;
border-bottom: 1px solid #fff;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>Nach dem Login kopieren
Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Verwendung von vue2 zur Implementierung von Warenkorb- und Adressauswahlfunktionen
Angular-Entwicklungspraxis für serverseitiges Rendering
Vue-Beispielcode zur Implementierung von „Alles und Keine auswählen“
Das obige ist der detaillierte Inhalt vonSo laden Sie Daten durch Schieben in das mobile UI-Framework von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
