master
parent
40321de411
commit
bfcce1b670
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="head" :style="{ height: height + 'px', background:background}">
|
||||
<view class="back" @click="back" v-if="backShow" :style="{
|
||||
top: top + 'px',
|
||||
color:color
|
||||
}">
|
||||
<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
|
||||
</view>
|
||||
<view class="title" v-if="titleShow" :style="{
|
||||
top: top + 'px',
|
||||
color:color,
|
||||
'font-size': size + 'rpx'
|
||||
}">{{title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '自定义标题'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 32
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
titleShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: "linear-gradient(to right, #43e97b 0%, #38f9d7 100%)"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 0,
|
||||
top: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//设备信息
|
||||
let app = uni.getSystemInfoSync();
|
||||
// console.log('设备信息', app)
|
||||
// #ifdef APP-PLUS
|
||||
this.top = app.safeArea.top
|
||||
this.height = 64 + app.safeAreaInsets.bottom
|
||||
this.$emit('getHeight', this.height)
|
||||
//#endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
|
||||
//胶囊信息
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
this.height = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2
|
||||
this.top = menuButtonInfo.top;
|
||||
this.$emit('getHeight', this.height)
|
||||
//#endif
|
||||
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
console.log('点击头部返回')
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.head {
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
width: 81rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
font-weight: 900;
|
||||
z-index: 9;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 226 KiB |
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<view :style="{ height: statusBarHeight + 'px', backgroundSize: `100% ${statusBarHeight}px`}" :class="[ statusBarHeight == 20 ? 'uni-status-bar__20': 'uni-status-bar__44', 'uni-status-bar']">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UniStatusBar',
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 20
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-status-bar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
.uni-status-bar__20 {
|
||||
background-image: url("../../static/top-20.png");
|
||||
}
|
||||
.uni-status-bar__44 {
|
||||
background-image: url("../../static/top-44.png");
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
|
||||
|
||||
### dw-nav-bar 导航栏
|
||||
|
||||
``dw-nav-bar``导航栏组件，基于``uni-nav-bar``组件修改，主要用于头部导航，可设置导航栏背景图片。
|
||||
|
||||
### 使用方式
|
||||
|
||||
使用方式参考[uni-nav-bar](https://ext.dcloud.net.cn/plugin?id=52)组件
|
||||
|
||||
在 ``script`` 中引用组件
|
||||
|
||||
```javascript
|
||||
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
|
||||
export default {
|
||||
components: {uniNavBar}
|
||||
}
|
||||
```
|
||||
|
||||
在 ``template`` 中使用组件
|
||||
|
||||
```html
|
||||
<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### 属性说明
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:-: |:-: |:-: |:-: |
|
||||
|title |String |- |标题文字 |
|
||||
|leftText |String |- |左侧按钮文本 |
|
||||
|rightText |String |- |右侧按钮文本 |
|
||||
|leftIcon |String |- |左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） |
|
||||
|rightIcon |String |- |右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） |
|
||||
|color |String |#000000|图标和文字颜色 |
|
||||
|backgroundColor |String |#FFFFFF|导航栏背景颜色 |
|
||||
|fixed |Boolean|false |是否固定顶部 |
|
||||
|statusBar |Boolean|false |是否包含状态栏 |
|
||||
|shadow |Boolean|false |导航栏下是否有阴影 |
|
||||
|
||||
### 插槽说明
|
||||
|
||||
开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。
|
||||
|
||||
|slot名 |说明 |
|
||||
|:-: |:-: |
|
||||
|left |向导航栏左侧插入 |
|
||||
|right |向导航栏右侧插入 |
|
||||
|default|向导航栏中间插入 |
|
||||
|
||||
```html
|
||||
<uni-nav-bar>
|
||||
<view>标题栏</view>
|
||||
<view slot="left">left</view>
|
||||
<view slot="right">right</view>
|
||||
</uni-nav-bar>
|
||||
```
|
||||
|
||||
### 事件说明
|
||||
|
||||
|事件名 |说明 |返回值 |
|
||||
|:-: |:-: |:-: |
|
||||
|@clickLeft |左侧按钮点击时触发 |- |
|
||||
|@clickRight |右侧按钮点击时触发 |- |
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
Loading…
Reference in new issue