u-view的使用

介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架。

一.环境的配置

(1)安装

npm install uview-ui@2.0.31

(2)在main.js注册

// main.js,注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'

3. 在引入uView的全局SCSS主题文件

在项目src目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

4.引入uView基础样式

注意!

App.vue首行的位置引入,注意给style标签加入lang="scss"属性。

5.配置easycom组件模式

此配置需要在项目src目录的pages.json中进行

1.uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。

2.请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。
 

{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

二.组件的使用

如果你已经将上面的全部搞定之后,那么我们可以进行。

(1)日历------Calendar

u-view的使用_第1张图片

 如果我想去换个颜色:

u-view的使用_第2张图片

 直接加入color设置颜色即可。

u-view的使用_第3张图片

后面还有这么多的选择,详情可见官网。

(2)选择器的使用----picker

u-view的使用_第4张图片

(3)时间选择器------DatetimePicker 

u-view的使用_第5张图片

只要年月

u-view的使用_第6张图片

u-view的使用_第7张图片

其他配置可以通过接口文档来了解。

(4)评分--------Rate

u-view的使用_第8张图片

需要一个大星星。

u-view的使用_第9张图片

 通过查看可知星星的大小是由size来进行控制的。

u-view的使用_第10张图片

(5)搜索--------Search

u-view的使用_第11张图片

 改变右侧控件的文字

u-view的使用_第12张图片

(6)步进器----NumberBox

u-view的使用_第13张图片

只能正整数

u-view的使用_第14张图片

(7)Upload 上传 

u-view的使用_第15张图片

(8)单选框------Radio 

u-view的使用_第16张图片

自定义形状:

u-view的使用_第17张图片

(9)滑动选择器-----Slider

u-view的使用_第18张图片

自定义范围,

 u-view的使用_第19张图片

(10)长按提示-----Tooltip 

u-view的使用_第20张图片

 加入关闭按钮

u-view的使用_第21张图片

(11) 滚动通知-----------NoticeBar

u-view的使用_第22张图片

橫向步进形式滚动

u-view的使用_第23张图片

(12)折叠面板------Collapse

u-view的使用_第24张图片

(13) Popup-------------弹出层

u-view的使用_第25张图片

 (14) 宫格布局-------Grid

u-view的使用_第26张图片

 u-view的使用_第27张图片

 (15) 头像----------- Avatar u-view的使用_第28张图片

查看文档的能力很重要,很多东西都是根据文档来进行配置的,具体还是要根据公司的实际开发需求来定制的。如何阅读文档的能力:

                     非常重要!

                     非常重要!

                     非常重要!

你可能感兴趣的