Avec le développement de la technologie, la complexité du développement devient de plus en plus grande. La méthode de développement traditionnelle transforme un système en une application complète. Il arrive souvent qu'un petit changement ou l'ajout d'une petite fonction puisse entraîner un changement de la logique globale. La modification affecte tout le corps. Grâce au développement de composants, le développement et la maintenance individuels peuvent être réalisés efficacement et ils peuvent être combinés à volonté. Améliore considérablement la faible efficacité de développement et réduit les coûts de maintenance.
La création de composants est la seule solution pour toute application frontale comportant des scénarios commerciaux et des produits complexes après plusieurs itérations. La composantisation nécessite plus que la simple division et découplage des modules visibles en surface. Il y a aussi beaucoup de travail derrière elle pour prendre en charge la composantisation, comme les stratégies de division des modules basées sur les caractéristiques commerciales, les méthodes d'interaction entre les modules et la construction de systèmes, etc.
Les composants présentés dans cet article sont :
Les onglets de soulignement front-end adaptatifs à la largeur du texte peuvent définir la couleur de soulignement. Pour télécharger le code complet, veuillez visiter l'adresse du marché du plug-in uni-app : https://ext.dcloud.net.cn/plugin?id=12876
Pour plus d'informations sur les composants front-end, veuillez suivre le compte public WeChat : Développement de composants front-end
Le rendu est le suivant :
Le code d'implémentation est le suivant :
#### Instructions
```Comment utiliser
<!-- v-model : sélectionner les onglets de séquence : sélectionner le tableau myColor : souligner l'espace de couleurLeft : hauteur d'espacement des onglets : définir la hauteur @change : événement de commutation d'onglets -->
<ccScrollTabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></ccScrollTabs>
```
#### Partie du code HTML
```html
<modèle>
<view class="content">
<view style="margin: 10px;">Paramètres par défaut</view>
<ccScrollTabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="margin: 10px;color: #88888;">Définir la couleur de soulignement</view>
<ccScrollTabs v-model="tabIndexTwo" myColor="red" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="margin: 10px;color: #88888;">Définir l'espacement</view>
<ccScrollTabs v-model="tabIndexThree" spaceLeft="20" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="margin: 10px;color: #88888;">Définir la hauteur de la ligne</view>
<ccScrollTabs v-model="tabIndexfour" myColor="red" height="90" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="hauteur : 300px;couleur de fond : antiquewhite;"></view>
</vue>
</modèle>
```
#### Code JS (introduction des composants pour remplir les données)
```javascript
<script>
importer ccScrollTabs depuis '../../components/cc-scrollTabs/cc-scrollTabs.vue'
exporter par défaut {
Composants: {
ccScrollTabs
},
données() {
retour {
Indice de tabulation : 0,
onglets : ['Information', 'Sports', 'Vidéo', 'Live', 'Phoenix TV', 'Affaires gouvernementales', 'Belle Chine', 'Finance', 'Divertissement', 'Mode', 'Voiture', 'immobilier'],
tabIndexDeux : 0,
tabIndexTrois : 0,
ongletIndexquatre : 0
}
},
méthodes : {
tabChange(e) {
console.log("Bag de commutateur = " + JSON.stringify(e));
}
}
}
</script>
```
####CSS
```css
<style>
.contenu {
affichage : flexible ;
direction flexible : colonne ;
}
.logo {
hauteur : 200rpx ;
largeur : 200rpx ;
marge supérieure : 200 rpx ;
marge gauche : auto ;
marge droite : auto ;
marge inférieure : 50 rpx ;
}
.zone de texte {
affichage : flexible ;
justifier-contenu : centre ;
}
.titre {
taille de police : 36rpx ;
couleur : #8f8f94 ;
}
</style>
```