uviewui2 组件在项目使用相关配置

uviewui 组件使用

一 创建uniApp

新建——项目——uni-app——默认模板

二下载 uviewui 组件

下载地址:https://ext.dcloud.net.cn/plugin?id=1593

点击: 下载插件ZIP

解压文件

修改名称为 uview-ui ,然后复制到项目下

三 配置 uview-ui

在main.js 中引入 uview-ui

// 引入全局 uView 框架
import uView from '@/uview-ui';
Vue.use(uView)

其他组件引入

// 引入uView对小程序分享的mixin封装
let mpShare = require('@/uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)

在uni.scss 文件中引入 样式

/**
 * 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量
 * 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
 * uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用 
 */
@import '@/uview-ui/theme.scss';

在pages.json页面中注册组件

"easycom": {
	  "autoscan": true,
	  "custom": {
	   "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	  }
	},

四 自定义页面导航 设置

页面顶部自定义导航 必须在配置页面设置 "navigationStyle": "custom" // 隐藏系统导航栏

navigationBarTitleText 设置每个页面标题名称

<u-navbar class="custom-header" title="常用设置" height="44" >
	<view slot="right">
		<u-button size="mini" type="primary" style="margin-right:10px" @click="navTo('/pages/sys/workbench/index')">保存</u-button>
	</view>
</u-navbar>

{
"path": "pages/sys/workbench/install",
"style": {
"navigationBarTitleText": "常用设置",
"navigationStyle": "custom" // 隐藏系统导航栏
}
}

五底部导航

需要在pages.json页面中配置如下

"tabBar": {
		"color": "#333333",
		"selectedColor": "#4094ff",
		"backgroundColor": "#ffffff",
		"borderStyle": "white",
		"list": [
			 {
				"pagePath": "pages/crm/myIndex/myIndex",
				"iconPath": "static/aidex/tabbar/msg_1.png",
				"selectedIconPath": "static/aidex/tabbar/msg_2.png",
				"text": "业绩"
			},
			{
				"pagePath": "pages/crm/myCustomers/myCustomers",
				"iconPath": "static/aidex/tabbar/home_1.png",
				"selectedIconPath": "static/aidex/tabbar/home_2.png",
				"text": "客户"
			}
		]
	}

自定义 按钮在最底部

在最外层设置属性如下

<view class="wrap" style="padding-bottom: 60px;"></view>

uview 拥有很多通用样式 bottom-box 显示在最底部

	<u-row gutter="32" class="bottom-box" justify="center">
				<u-col span="10">
					<view><u-button type="primary" shape="circle" @click="navTo('/pages/sys/home/index')">确定</u-button></view>
				</u-col>
			</u-row>

官方网址

posted @ 2022-03-31 18:45  剧里局外  阅读(500)  评论(0编辑  收藏  举报