在uniapp中配置并colorui及阿里图标

一、配置colorUI

1.下载colorui文件

在github中下载：GitHub镜像/ColorUI

或在插件市场下载：ColorUI-UniApp - DCloud 插件市场

2.解压文件夹把其中的colorui文件夹复制后放入项目根目录

3.在根目录下的App.vue中引入colorui中的css文件

<style>/*每个页面公共css */@import "colorui/main.css";@import "colorui/icon.css";
</style>

4.在根目录下main.js中引入colorui的cu-custom 组件

import cuCustom from 'colorui/components/cu-custom.vue'
Vue.config.productionTip = false

5.在页面中使用colorui的组件（直接复制想引入的组件代码即可使用）

<view><swiper class="card-swiper" :circular="true" :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff"><swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''"><view class="swiper-item"><image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image><video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video></view></swiper-item></swiper>
</view>

二、配置阿里图标

1.在阿里图标库中下载需要的图标

iconfont-阿里巴巴矢量图标库

2.解压图标文件并复制其中的iconfont.css和iconfont.tff文件放入common文件夹或者static文件下新建的iconfont文件中

3.复制阿里图标库中的@font-face替换iconfont.css中并添加https:

4.在App.vue中引入图标css文件

<style>/*每个页面公共css */@import url("static/iconfont/iconfont.css");
</style>

5.使用图标

（1）在导航栏中使用时，需要把&#xe替换为\ue

"tabBar": {"color": "#dbdbdb","selectedColor": "#333","borderStyle": "#dbdbdb","height":"60px","backgroundColor": "white",// 可以在这里配置图标文件路径也可以下面的iconPath中配置，但注意文件路径必须是绝对路径"iconfontSrc": "/static/iconfont/iconfont.ttf","list": [{"iconfont": {"text": "\ue627","selectedText": "\ue627","fontSize": "24px","color": "#dbdbdb","selectedColor": "#ffc600"},"text": "首页","pagePath": "pages/home/home"// 配置底部按钮图标的方式：在这里配置iconPath默认图标及selectedIconPath选中时图标；// "iconPath": "static/recommand.png",// "selectedIconPath": "static/recommand_selected.png"},]},

（2）在页面中使用时，查找图标对应名称，并放在页面元素的class中

<i class="iconfont icon-shoujisel"></i>
<view class="iconfont icon-shoujisel"></view>

在uniapp中配置并colorui及阿里图标相关推荐

pom中配置maven仓库（阿里仓库）
文章目录 pom中配置maven仓库 pom中配置maven仓库配置maven仓库,可以在maven的settings.xml里改.优点是全局统一配置,缺点是不受你项目git管理. 也可以直接在po ...
React项目中如何结合antd引入阿里图标（外联方式）
在Raect项目中,图标的使用不可避免,如何使用根据antd来使用阿里图标库? 一.在阿里图标库中选中自己需要的图标存到自己的项目当中并下载至本地二.1.在React项目的根目录下创建一个stati ...
uni-app 顶部配置搜索框和左右图标
效果图如下: 1.顶部的图标只支持本地图片,所以将阿里巴巴上的图标下载到本地,只要XXX.ttf这个文件即可,放在static这个文件,在pages.json中fontSrc进行引入 2.text:使 ...
在Vue+Element ui 项目中如何使用iconfont（阿里图标库）中的图标
在项目过程中,element ui 中自带的图标往往满足不了自己的需求,那么如何在项目中使用iconfont的图标呢? 在iconfont中新建一个项目找到自己想要的图标,加入购物车,加入完成后点击 ...
uniapp中怎么让天地图的定位图标跟着罗盘数据旋转
uniapp中引入阿里图标
一.在uniapp中发现,以往H5的阿里使用步骤失效了: 1.把图标加入购物车,在购物车里添加至项目,选择下载至本地 2.把文件夹里除了html和demo的全部粘贴至软件 3.link引入iconfo ...
react中通过Antd使用阿里图标
react中通过Antd使用iconfont阿里图标安装依赖组件中引入安装依赖 npm install --save @ant-design/icons 组件中引入 **//从antd中引入fo ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...
uniapp开发app中配置高德地图定位流程
在使用uniapp开发app过程中,如何使用高德地图进行定位高德地图开放平台账号申请进入高德地图开放平台,注册并登陆开发者账号,完成之后点击进入控制台主页在应用管理中点击创建新应用输入并选择你 ...
【java笔记-006】【uni-app】当前运行的基座不包含原生插件[xxx]，请在manifest中配置该插件，重新制作包括该原生插件的自定义运行基座
uni-app引入原生插件的步骤如下:https://nativesupport.dcloud.net.cn/NativePlugin/course/android 将制作好的原生安卓插件包复制到 ...

在uniapp中配置并colorui及阿里图标

一、配置colorUI

1.下载colorui文件

2.解压文件夹把其中的colorui文件夹复制后放入项目根目录

3.在根目录下的App.vue中引入colorui中的css文件

4.在根目录下main.js中引入colorui的cu-custom 组件

5.在页面中使用colorui的组件（直接复制想引入的组件代码即可使用）

二、配置阿里图标

1.在阿里图标库中下载需要的图标

2.解压图标文件并复制其中的iconfont.css和iconfont.tff文件放入common文件夹或者static文件下新建的iconfont文件中

3.复制阿里图标库中的@font-face替换iconfont.css中并添加https:

4.在App.vue中引入图标css文件

5.使用图标

在uniapp中配置并colorui及阿里图标相关推荐

最新文章

热门文章