Heim > Web-Frontend > uni-app > Hauptteil

Ausführliche Erläuterung der Verwendung von Uni-App-Komponenten

coldplay.xixi
Freigeben: 2020-12-04 16:16:30
nach vorne
9059 Leute haben es durchsucht

uni-App-Entwicklung Tutorial Column führt die Verwendung von Komponenten ein (kostenlos): uni-App-Entwicklung Tutorial

Ausführliche Erläuterung der Verwendung von Uni-App-Komponenten

1. Formatfehler

<!-- 选择分类 -->
        <view>
            <view>文章分类</view>
            <view>
                <picker>
                    <view>{{caties[currentCateIndex]}}</view>
                </picker>
            </view>
        </view>
Nach dem Login kopieren
Nach dem Login kopieren
2. Das Symbol h5 unterstützt
<!-- 选择分类 -->
        <view>
            <view>文章分类</view>
            <view>
                <picker>
                    <view>{{caties[currentCateIndex]}}</view>
                </picker>
            </view>
        </view>
Nach dem Login kopieren
Nach dem Login kopieren
oder
<!-- 单独使用icon组件 -->
<icon></icon>
Nach dem Login kopieren

Bemerkungen: Ob die Symbolkomponente allein oder in Verbindung mit dem Schriftartensymbol verwendet wird , solange eine Symbolkomponente h5 vorhanden ist, werden alle Fehler gemeldet. Sie können die folgenden Methoden verwenden, um die Unterschiede in der Symbolkomponente an jedem Ende zu beheben

  • Anpassungslösung eins: Uni-App unterstützt auch Schriftartensymbole

    <!-- icon组件和字体图标配合使用 -->
    <icon></icon>
    Nach dem Login kopieren
    Ausführliche Erläuterung der Verwendung von Uni-App-Komponenten oder
    <text></text>
    Nach dem Login kopieren
    Nach dem Login kopieren

    Hinweis: Wenn Sie das Netzwerkpfad-Schriftsymbol verwenden, muss der Netzwerkpfad einen Protokollheader hinzufügenAusführliche Erläuterung der Verwendung von Uni-App-Komponentenhttps

    .

    Bemerkungen: Nachdem die Symbolkomponente durch Text ersetzt wurde, entsprechen Größe, Rand und Farbe des Schriftartsymbols möglicherweise nicht den Erwartungen. Sie können sie entsprechend anpassen. Beispiel: 备注:不管是单独使用icon组件或者和字体图标配合使用,只要有icon组件h5都报错,可使用以下方式来解决icon组件在各端的差异

    • 适配方案一:uni-app也支持字体图标
    <text></text>
    Nach dem Login kopieren

    <icon></icon> >
    Nach dem Login kopieren

    注意:若使用网络路径字体图标,网络路径必须加协议头https
    备注:icon组件换成text后,字体图标的大小边距和颜色可能与预期不一致,可自行适当调整。如:

    
        <text></text>
    
    Nach dem Login kopieren

    改为:

    <style>
        @import "colorui/main.css";
        @import "colorui/icon.css";
        @import "app.css"; /* 你的项目css */
        ....
    </style>
    Nach dem Login kopieren
    • 适配方案二:使用uni-app的拓展组件icon
    • 适配方案三:使用ColorUI-UniApp中的图标
      (1)下载源码解压
      备注
      <text></text>
      Nach dem Login kopieren
      Nach dem Login kopieren

      wird geändert in:
    • rrreee
      • Anpassungsplan zwei: Verwenden Sie das Erweiterungskomponentensymbol von uni-app
    • Anpassungsplan drei: verwenden Sie das Symbol in ColorUI-UniApp

      (1) Quellcode-Dekomprimierung herunterladenAusführliche Erläuterung der Verwendung von Uni-App-KomponentenBemerkungen: Sie können den Quellcode des ColorUI-UniApp-Projekts auch erhalten, indem Sie ein neues ColorUI-Vorlagenprojekt in uni-app erstellen


      (2) Kopieren / in ColorUI-UniApp-Projektverzeichnis, Colorui-Ordner, in Ihr Projektstammverzeichnis Programmierung, bitte bleiben Sie dran

      php-Schulung Kolumne!

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Uni-App-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:jianshu.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage