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

推薦（免費(fèi)）：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格式錯(cuò)誤

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

2.icon圖標(biāo)h5端不支持

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

或

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

備注：不管是單獨(dú)使用icon組件或者和字體圖標(biāo)配合使用，只要有icon組件h5都報(bào)錯(cuò)，可使用以下方式來(lái)解決icon組件在各端的差異

• 適配方案一：uni-app也支持字體圖標(biāo)

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

或

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

注意：若使用網(wǎng)絡(luò)路徑字體圖標(biāo)，網(wǎng)絡(luò)路徑必須加協(xié)議頭https。
備注：icon組件換成text后，字體圖標(biāo)的大小邊距和顏色可能與預(yù)期不一致，可自行適當(dāng)調(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中的圖標(biāo)
  (1)下載源碼解壓
  備注：也可通過(guò)新建uni-app中的ColorUI模板項(xiàng)目來(lái)獲取ColorUI-UniApp項(xiàng)目源碼

(2)復(fù)制ColorUI-UniApp項(xiàng)目目錄下的 /colorui 文件夾到你的項(xiàng)目根目錄
(3)App.vue 引入關(guān)鍵Css main.css icon.css

<style>     @import "colorui/main.css";     @import "colorui/icon.css";     @import "app.css"; /* 你的項(xiàng)目css */     .... </style>

(4)使用ColorUI的圖標(biāo)

<text class="cuIcon-scan"></text>

想了解