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
coldplay.xixiavant
2020-12-04 16:16:309092parcourir

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>

Erreur de format de plage

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

<!-- 单独使用icon组件 -->
<icon></icon>

ou

<!-- icon组件和字体图标配合使用 -->
<icon></icon>

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>
  • ou
<text></text>

 : 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> >
备注 est remplacé par :

    <text></text>

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>

(4) Utilisez les icônes ColorUI
<text></text>

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer