uni-app組件使用詳解

uni-app開發教學欄位介紹元件使用情況

推薦（免費）：uni-app開發教學

1、picker 清單資料不顯示

<!-- 选择分类 -->
        <view>
            <view>文章分类</view>
            <view>
                <picker>
                    <view>{{caties[currentCateIndex]}}</view>
                </picker>
            </view>
        </view>

range格式錯誤

<!-- 选择分类 -->
        <view>
            <view>文章分类</view>
            <view>
                <picker>
                    <view>{{caties[currentCateIndex]}}</view>
                </picker>
            </view>
        </view>

2. icon圖示h5端不支援

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

或

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

備註：不管是單獨使用icon元件或和字型圖示搭配使用，只要有icon元件h5都報錯，可使用以下方式來解決icon元件在各端的差異

• 適配方案一：uni-app也支援字體圖標

<text></text>

或

<text></text>

注意：若使用網頁路徑字體圖標，網路路徑必須加協議頭https 。
備註：icon組件換成text後，字體圖示的大小邊距和顏色可能與預期不一致，可自行適當調整。如：

<icon></icon> >

改為：

    <text></text>

• 適配方案二：使用uni-app的拓展元件icon
• 適配方案三：使用ColorUI-UniApp中的圖示
  (1)下載原始碼解壓縮
  備註：也可透過新建uni-app中的ColorUI範本專案來取得ColorUI-UniApp專案原始碼
  

#(2)複製ColorUI-UniApp專案目錄下的/colorui 資料夾到你的專案根目錄
(3)App.vue 引入關鍵Css main.css icon .css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    @import "app.css"; /* 你的项目css */
    ....
</style>

(4)使用ColorUI的圖示

<text></text>

想了解更多程式設計學習，請關注##php培訓專欄！

以上是uni-app組件使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！