Cet article présente principalement la méthode de chargement coulissant du framework vue mobile UI. Maintenant, je le partage avec vous et le donne comme référence.
Avant-propos
Il existe également un composant très courant sur notre terminal mobile, qui glisse pour charger plus de composants. Habituellement, nous voyons de nombreux plug-ins assez compliqués à mettre en œuvre et pensons que ce composant est difficile, mais ce n'est pas le cas ! ! Ce composant peut en fait être implémenté très facilement, et l'expérience peut être très intéressante (bien sûr, nous n'avons pas implémenté la fonction d'actualisation déroulante) ! ! Implémentons ce composant ensemble.
Affichage de l'effet
Tout d'abord, une image GIF montre l'effet après l'avoir créé, comme suit :
Structure DOM
La page doit contenir trois parties : 1. Zone de texte 2. Charger le chrysanthème et enregistrer le texte 3. Tout charger data Texte complété :
<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>style CSS
Conteneur r-scroll pour l'ensemble du composant Il doit s'agir d'une largeur fixe et la partie excédentaire peut défiler ; la zone de texte doit automatiquement croître en hauteur avec le contenu ; le petit chrysanthème sera affiché lors du chargement de la valeur par défaut en bas de la distance de défilement ; est chargé, le texte de fin de chargement des données s'affichera :
<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>javascript
Interaction analyse logique :
Lorsque la page est initialisée, obtenez l'intégralité du nœud du composant et le nœud du conteneur de texte
Liez l'événement scroll à l'intégralité nœud de conteneur
Le conteneur défile Au cours du processus, il est jugé si la distance par rapport au sommet est inférieure à la valeur spécifiée. Si elle est inférieure à la valeur, l'événement personnalisé chargeplus<. 🎜>
<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><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> et écrivez-le à la fin <🎜. >
Enfin, voici une annexe avec un exemple d'utilisation :
<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>Ce qui précède est ce que j'ai compilé pour vous, j'espère. cela vous sera utile à l'avenir.
Articles connexes :
Utiliser vue2 pour implémenter les fonctions de panier d'achat et de sélection d'adresseRendu côté serveur de pratique de développement angulaire Exemple de code Vue pour implémenter la sélection de tout et rienCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment résoudre le problème que les CSS ne peuvent pas être chargés
Que faire si le CSS ne peut pas être chargé
Comment lier des données dans une liste déroulante
Que faire si le chargement de la DLL échoue
tutoriel vbnet
prix BTC aujourd'hui
Le dernier classement des dix principales bourses du cercle des devises
Quel logiciel est premier
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
