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>