uni-app中组件和样式的使用

概要

本文主要介绍uni-app中组件和样式的使用

二.组件和样式

1.常见内置组件

https://uniapp.dcloud.net.cn/component/view.html

◼ view：视图容器。类似于传统html中的div，用于包裹各种元素内容。（视图容器可以使用div吗？可以，但div不跨平台）

◼ text：文本组件。用于包裹文本内容。

◼ button：在小程序端的主题 和 在其它端的主题色不一样（可通过条件编译来统一风格）。

◼ image：图片。默认宽度 320px、高度 240px

​  仅支持相对路径、绝对路径，支持导入，支持 base64 码；

◼ scrollview：可滚动视图区域，用于区域滚动。

​  使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height

​  使用横向滚动时，需要给添加white-space: nowrap;样式，子元素设置为行内块级元素。

​  APP和小程序中，请勿在 scroll-view 中使用 map、video 等原生组件。

​  小程序的 scroll-view 中也不要使用 canvas、textarea 原生组件。

​  若要使用下拉刷新，建议使用页面的滚动，而不是 scroll-view

◼ swiper：滑块视图容器，一般用于左右滑动或上下滑动比如banner轮播图。

​  默认宽100%，高为150px，可设置swiper组件高度来修改默认高度，图片宽高可用100%。

◼ navigator：相当于a标签

2.样式导入

◼ 使用@import语句可以导入外联样式（css 或 scss）

◼ @import后跟需要导入的外联样式表的相对路径， 用 ; 表示语句结束。

​  除了相对路径，默认是支持绝对路径（即@别名前缀）

​ ✓ 相对路径：…/…/common/base.css

​ ✓ 绝对路径：@/static/common/base.css

3.背景图片的导入

◼ uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：

​  支持 base64 格式图片，支持网络路径图片。

​  小程序不支持在 css 中使用本地文件，包括背景图和字体文件，需转成 base64 后使用。如何转？

​  使用本地背景图片或字体图标需注意：

​ ✓ 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；

​ ✓ 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使

用，或将其挪到服务器上，从网络地址引用。

​ ✓ 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

4.字体图标

https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html

5.uni-ui外部组件

– 安装uni-ui

◼ **方式一（推荐）：通过 uni_modules（插件模块化规范）单独安装组件，**通过 uni_modules 按需安装某个组件：

✓ 步骤1：官网找到扩展组件清单，然后将所需要的组件导入到项目，导入后直接使用，无需import和注册。

✓ 步骤2：通常我们还想切换应用风格，这时可以在uni.scss导入uni-ui提供的内置scss变量，然后重启应用。

✓ 注意：需要登录 DCloud 账号才能安装

◼ 方式二（推荐） ：通过 uni_modules 导入全部组件

 如想把所有uni-ui组件导入到项目，可以借用Hbuilder X插件导入。

 如没自动导入其他组件，可在 uni-ui 组件目录上右键选择 安装三方插件依赖 即可。

◼ 方式三：在 HBuilderX 新建 uni-app项目时，在模板中选择 uni-ui 模板来创建项目

 由于uni-app独特的easycom（自动导包）技术，可以免引入、注册，就直接使用符合规则的vue组件。

◼ 方式四：npm安装

 在 vue-cli 项目中可用 npm 安装 uni-ui 库

 或直接在 HBuilderX 项目中用 npm安装 。

– 重写组件样式

◼ 小程序、App直接重写，需要添加 important

◼ H5、App和小程序使用：global( selector ) ，需要添加important

◼ H5 、App和小程序使用：deep( selector ) ，需要添加important

小结

本文主要介绍uni-app中组件和样式的使用
由于作者水平有限
如果对本文有任何疑问可以私信或者评论区发表你的看法
本文如果对你有帮助，麻烦点个赞和收藏方便回看，求关注 谢谢