页面主操作 Normal
2. 字体库的引入
1、拷贝common目录到项目中,icon.css在common中,并修改引入的字体路径
2、拷贝static目录到项目中,字体文件在static目录中。
在mainjs中引入iconfont.css
// 引入全局css
import ‘./static/2002icon/iconfont.css’
在组件中页面中使用:
3. 自定义组件
根目录下创建components目录,创建list.vue组件
- 父组件我的页面my.vue,引入自定义组件list.vue,并传参
最终效果:
3. uni-ui的使用
1)uni-ui 是全端兼容的基于flex布局的ui库;
2)可以使用 npm 的安装使用方式,也可下载相关组件直接使用;
3)uni-ui
不支持使用 Vue.use() 的方式安装
4)uni-ui 依赖 scss,若是 HBuilderX 中创建的 uni-app
项目,需要在 HBuilderX 中安装 scss 插件;如果是使用 cli 创建的 uni-app 项目,需要在项目下npm安装node-sass 和 sass-loader
1. 初始化项目
在 HBuilderX 中新建 uni-app 项目,进入项目目录,执行:
npm init -y
2. 安装 uni-ui
npm install @dcloudio/uni-ui
3. 使用 uni-ui
index.vue引入组件,在template中使用
helloword
<uni-pagination
show-icon=false
total=100
pageSize=10
current=2
prev-text=“上一页”
next-text=“下一页”