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>