uni-app開發(fā)教程欄目介紹組件使用情況

推薦（免費）：uni-app開發(fā)教程

1、picker 列表數(shù)據(jù)不顯示

<!-- 選擇分類 -->         <view class="art-cate">             <view>文章分類</view>             <view class="">                 <picker mode="selector" range="caties" @change="cateChange">                     <view>{{caties[currentCateIndex]}}</view>                 </picker>             </view>         </view>

range格式錯誤

<!-- 選擇分類 -->         <view class="art-cate">             <view>文章分類</view>             <view class="">                 <picker mode="selector" :range="caties" @change="cateChange">                     <view>{{caties[currentCateIndex]}}</view>                 </picker>             </view>         </view>

2.icon圖標h5端不支持

<!-- 單獨使用icon組件 --> <icon type="search" size="14"></icon>

或

<!-- icon組件和字體圖標配合使用 --> <icon class='iconfont uc-scan'></icon>

備注：不管是單獨使用icon組件或者和字體圖標配合使用，只要有icon組件h5都報錯，可使用以下方式來解決icon組件在各端的差異

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

<text class="iconfont uc-scan"></text>

或

<text class="iconfont">&#xe604;</text>

注意：若使用網(wǎng)絡路徑字體圖標，網(wǎng)絡路徑必須加協(xié)議頭https。
備注：icon組件換成text后，字體圖標的大小邊距和顏色可能與預期不一致，可自行適當調(diào)整。如：

<icon class='iconfont uc-liebiao'></icon >

改為：

<view class="margin-right-xs text-orange">     <text class='iconfont uc-liebiao'></text> </view>

• 適配方案二：使用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 class="cuIcon-scan"></text>

想了解