Avec le développement continu de la technologie, la méthode de développement traditionnelle rend la complexité du système de plus en plus élevée. Dans le processus de développement traditionnel, un petit changement ou l'ajout d'une petite fonction peut entraîner la modification de la logique globale, entraînant une situation qui affecte tout le corps. Afin de résoudre ce problème, nous avons adopté un modèle de développement par composants. Grâce au développement de composants, un développement et une maintenance séparés peuvent être efficacement réalisés et ils peuvent être combinés à volonté. Il améliore considérablement l'efficacité du développement et réduit les coûts de maintenance.
Dans cet article, nous allons vous présenter comment utiliser le composant cc-countdown dans uni-app. cc-countdown est un composant de compte à rebours qui peut afficher le temps restant, les jours, les heures, les minutes et les secondes. Les utilisateurs peuvent personnaliser l'apparence et le comportement du compte à rebours en définissant différentes propriétés. Adresse de téléchargement du code source joint : https://ext.dcloud.net.cn/plugin?id=13819
Les rendus sont les suivants :
Instructions
Tout d'abord, nous devons introduire le composant cc-countdown dans le fichier de projet uni-app et le configurer via les propriétés. Voici un exemple:
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="false" :day="0" :hour="0" :minute="0" :second="12" @timeup="timeup"></cc-countdown>
Dans le code ci-dessus, nous pouvons voir que le composant cc-countdown a les propriétés suivantes :
-
color: Couleur du texte, la valeur par défaut est le blanc. -
background-color: Couleur de fond, la valeur par défaut est rouge. -
splitorColor: couleur du séparateur, la valeur par défaut est le rouge. -
showColon: Indique s'il faut afficher les deux-points, la valeur par défaut est true (affichage). -
showDay: Indique s'il faut afficher le nombre de jours, la valeur par défaut est false (non affiché). -
day: Le nombre de jours à afficher, la valeur par défaut est 0. -
hour: Heures à afficher, par défaut à 0. -
minute: Le nombre de minutes à afficher, par défaut à 0. -
second: Secondes à afficher, la valeur par défaut est 12. -
@timeup: L'événement de fin de compte à rebours est utilisé pour gérer l'opération après la fin du compte à rebours.
En plus des propriétés ci-dessus, nous pouvons également implémenter des fonctions personnalisées via la surveillance des événements. Par exemple, nous pouvons déclencher un événement personnalisé à la fin du compte à rebours. Voici un exemple:
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="false" :day="0" :hour="0" :minute="0" :second="12" @timeup="timeup"></cc-countdown>
Dans le code ci-dessus, nous @timeupavons écouté l'événement de fin de compte à rebours via la propriété et défini une timeupméthode appelée pour gérer l'événement. La logique de traitement spécifique sera introduite dans les chapitres suivants.
Partie implémentation du code HTML
Ensuite, nous montrerons la partie complète de l'implémentation du code HTML. Le premier est la structure de mise en page de la page, suivi de la définition des styles et de l'implémentation des composants.
Partie implémentation du code HTML
<template>
<view class="page">
<view style="height: 60px;"></view>
<!-- color 文字颜色 background-color：背景颜色 splitorColor：分割符：颜色 showColon：是否显示冒号 false显示时分秒 showDay：是否显示天 day：天 hour：时 minute：分 second：秒 @timeup：倒计时结束事件-->
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="false" :day="0"
:hour="0" :minute="0" :second="12" @timeup="timeup"></cc-countdown>
<view style="height: 30px;"></view>
<!-- color 文字颜色 background-color：背景颜色 splitorColor：分割符：颜色 showColon：是否显示冒号 false显示时分秒 showDay：是否显示天 day：天 hour：时 minute：分 second：秒 @timeup：倒计时结束事件-->
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="false" :showDay="false"
:day="0" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown>
<view style="height: 30px;"></view>
<!-- color 文字颜色 background-color：背景颜色 splitorColor：分割符：颜色 showColon：是否显示冒号 false显示时分秒 showDay：是否显示天 day：天 hour：时 minute：分 second：秒 @timeup：倒计时结束事件-->
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="true" :day="1"
:hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown>
<view style="height: 30px;"></view>
<!-- color 文字颜色 background-color：背景颜色 splitorColor：分割符：颜色 showColon：是否显示冒号 false显示时分秒 showDay：是否显示天 day：天 hour：时 minute：分 second：秒 @timeup：倒计时结束事件-->
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="false" :showDay="true" :day="1"
:hour="1" :minute="12" :second="32"></cc-countdown>
<view style="height: 60px;"></view>
<!-- color 文字颜色 background-color：背景颜色 splitorColor：分割符：颜色 showColon：是否显示冒号 false显示时分秒 showDay：是否显示天 day：天 hour：时 minute：分 second：秒 @timeup：倒计时结束事件-->
<cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="true" :showDay="false"
:day="0" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown>
<view style="height: 30px;"></view>
<!-- color 文字颜色 background-color：背景颜色 splitorColor：分割符：颜色 showColon：是否显示冒号 false显示时分秒 showDay：是否显示天 day：天 hour：时 minute：分 second：秒 @timeup：倒计时结束事件-->
<cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="false" :showDay="false"
:day="0" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown>
<view style="height: 30px;"></view>
<!-- color 文字颜色 background-color：背景颜色 splitorColor：分割符：颜色 showColon：是否显示冒号 false显示时分秒 showDay：是否显示天 day：天 hour：时 minute：分 second：秒 @timeup：倒计时结束事件-->
<cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="true" :showDay="true"
:day="1" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown>
<view style="height: 30px;"></view>
<!-- color 文字颜色 background-color：背景颜色 splitorColor：分割符：颜色 showColon：是否显示冒号 false显示时分秒 showDay：是否显示天 day：天 hour：时 minute：分 second：秒 @timeup：倒计时结束事件-->
<cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="false" :showDay="true"
:day="1" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
methods: {
// 倒计时结束
timeup() {
uni.showModal({
title: '温馨提示',
content: '倒计时结束'
})
}
},
}
</script>
<style lang="scss" scoped>
page {
background-color: white;
}
</style>