Maison > interface Web > uni-app > Explication détaillée de l'utilisation des composants uni-app

Explication détaillée de l'utilisation des composants uni-app

coldplay.xixi
Libérer: 2020-12-04 16:16:30
avant
9101 Les gens l'ont consulté

Tutoriel de développement d'uni-appLa colonne présente l'utilisation des composants

Explication détaillée de l'utilisation des composants uni-app

Recommandé (gratuit) : Tutoriel de développement d'uni-app

1 Les données de la liste de sélection ne sont pas affichées

<!-- 选择分类 -->
        <view>
            <view>文章分类</view>
            <view>
                <picker>
                    <view>{{caties[currentCateIndex]}}</view>
                </picker>
            </view>
        </view>
Copier après la connexion
Copier après la connexion

Erreur de format de plage

<!-- 选择分类 -->
        <view>
            <view>文章分类</view>
            <view>
                <picker>
                    <view>{{caties[currentCateIndex]}}</view>
                </picker>
            </view>
        </view>
Copier après la connexion
Copier après la connexion
2. Le côté h5 de l'icône ne prend pas en charge

<!-- 单独使用icon组件 -->
<icon></icon>
Copier après la connexion

ou

<!-- icon组件和字体图标配合使用 -->
<icon></icon>
Copier après la connexion

Explication détaillée de lutilisation des composants uni-app

Explication détaillée de lutilisation des composants uni-app

 : que vous utilisiez le composant icône seul ou utilisé conjointement avec des icônes de police, tant qu'il y a un composant icône h5, une erreur sera signalée. Vous pouvez utiliser les méthodes suivantes pour résoudre les différences dans les composants d'icône à chaque extrémité备注<.>

Solution d'adaptation 1 : uni-app prend également en charge les icônes de police
  • <text></text>
    Copier après la connexion
    Copier après la connexion
  • ou
<text></text>
Copier après la connexion

 : si vous utilisez l'icône de police du chemin réseau, le chemin réseau il faut ajouter l'en-tête du protocole

注意. https : Une fois le composant icône remplacé par du texte, la taille, la marge et la couleur de l'icône de police peuvent ne pas correspondre aux attentes. Vous pouvez l'ajuster de manière appropriée. Par exemple :

<icon></icon> >
Copier après la connexion
备注 est remplacé par :

    <text></text>
Copier après la connexion

Plan d'adaptation deux : utilisez l'icône du composant d'extension d'uni-app
  • Plan d'adaptation trois : utilisez ColorUI- Icône UniApp dans
  • (1) Téléchargez le code source et décompressez

  •  : Vous pouvez également obtenir le code source du projet ColorUI-UniApp en créant un nouveau projet de modèle ColorUI dans uni-app
    备注

Explication détaillée de lutilisation des composants uni-app(2) Copiez le dossier /colorui dans le répertoire du projet ColorUI-UniApp dans le répertoire racine de votre projet

(3) App.vue introduit la clé Css main. css icon.css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    @import "app.css"; /* 你的项目css */
    ....
</style>
Copier après la connexion

(4) Utilisez les icônes ColorUI
<text></text>
Copier après la connexion
Copier après la connexion

Si vous souhaitez en savoir plus sur la programmation, veuillez faire attention à

formation php rubrique !

Ce 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!

Étiquettes associées:
source:jianshu.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal