Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 b0603133 编写于 作者: H hdx
浏览文件
操作

components: rpx to px; 移除不必要的display: flex;

上级 a1e825d2
隐藏空白更改
内联 并排
Showing with 488 addition and 493 deletion
components/api-set-tabbar/api-set-tabbar.vue
浏览文件 @ b0603133
<template>
<view class="uni-padding-wrap">
<page-head :title="title"></page-head>
<button class="button" @click="setTabBarBadge">{{ !hasSetTabBarBadge ? '设置tab徽标' : '移除tab徽标' }}</button>
<button class="button" @click="showTabBarRedDot">{{ !hasShownTabBarRedDot ? '显示红点' : '移除红点'}}</button>
<button class="button" @click="customStyle">{{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}</button>
<button class="button" @click="customItem">{{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}</button>
<button class="button" @click="hideTabBar">{{ !hasHiddenTabBar ? '隐藏TabBar' : '显示TabBar' }}</button>
<view class="btn-area">
<!-- <button class="button" type="primary" @click="navigateBack">关闭</button> -->
</view>
</view>
<view class="uni-padding-wrap">
<page-head :title="title"></page-head>
<button class="button" @click="setTabBarBadge">{{ !hasSetTabBarBadge ? '设置tab徽标' : '移除tab徽标' }}</button>
<button class="button" @click="showTabBarRedDot">{{ !hasShownTabBarRedDot ? '显示红点' : '移除红点'}}</button>
<button class="button" @click="customStyle">{{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}</button>
<button class="button" @click="customItem">{{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}</button>
<button class="button" @click="hideTabBar">{{ !hasHiddenTabBar ? '隐藏TabBar' : '显示TabBar' }}</button>
<view class="btn-area">
<!-- <button class="button" type="primary" @click="navigateBack">关闭</button> -->
</view>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
title: 'tababr',
hasSetTabBarBadge: false,
hasShownTabBarRedDot: false,
hasCustomedStyle: false,
hasCustomedItem: false,
hasHiddenTabBar: false
}
},
destroyed() {
if (this.hasSetTabBarBadge) {
uni.removeTabBarBadge({
index: 1
})
}
if (this.hasShownTabBarRedDot) {
uni.hideTabBarRedDot({
index: 1
})
}
if (this.hasHiddenTabBar) {
uni.showTabBar()
}
if (this.hasCustomedStyle) {
uni.setTabBarStyle({
color: '#7A7E83',
selectedColor: '#007AFF',
backgroundColor: '#F8F8F8',
borderStyle: 'black'
})
}
export default {
data() {
return {
title: 'tababr',
hasSetTabBarBadge: false,
hasShownTabBarRedDot: false,
hasCustomedStyle: false,
hasCustomedItem: false,
hasHiddenTabBar: false
}
},
destroyed() {
if (this.hasSetTabBarBadge) {
uni.removeTabBarBadge({
index: 1
})
}
if (this.hasShownTabBarRedDot) {
uni.hideTabBarRedDot({
index: 1
})
}
if (this.hasHiddenTabBar) {
uni.showTabBar()
}
if (this.hasCustomedStyle) {
uni.setTabBarStyle({
color: '#7A7E83',
selectedColor: '#007AFF',
backgroundColor: '#F8F8F8',
borderStyle: 'black'
})
}
if (this.hasCustomedItem) {
let tabBarOptions = {
index: 1,
text: '接口',
iconPath: '/static/api.png',
selectedIconPath: '/static/apiHL.png'
}
uni.setTabBarItem(tabBarOptions)
}
},
methods: {
navigateBack() {
this.$emit('unmount')
},
setTabBarBadge() {
if(this.hasShownTabBarRedDot){
uni.hideTabBarRedDot({
index: 1
})
this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
}
if (!this.hasSetTabBarBadge) {
uni.setTabBarBadge({
index: 1,
text: '1'
})
} else {
uni.removeTabBarBadge({
index: 1
})
}
this.hasSetTabBarBadge = !this.hasSetTabBarBadge
},
showTabBarRedDot() {
if(this.hasSetTabBarBadge) {
uni.removeTabBarBadge({
index: 1
})
this.hasSetTabBarBadge = !this.hasSetTabBarBadge
}
if (!this.hasShownTabBarRedDot) {
uni.showTabBarRedDot({
index: 1
})
} else {
uni.hideTabBarRedDot({
index: 1
})
}
this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
},
hideTabBar() {
if (!this.hasHiddenTabBar) {
uni.hideTabBar()
} else {
uni.showTabBar()
}
this.hasHiddenTabBar = !this.hasHiddenTabBar
},
customStyle() {
if (this.hasCustomedStyle) {
uni.setTabBarStyle({
color: '#7A7E83',
selectedColor: '#007AFF',
backgroundColor: '#F8F8F8',
borderStyle: 'black'
})
} else {
uni.setTabBarStyle({
color: '#FFF',
selectedColor: '#007AFF',
backgroundColor: '#000000',
borderStyle: 'black'
})
}
this.hasCustomedStyle = !this.hasCustomedStyle
},
customItem() {
let tabBarOptions = {
index: 1,
text: '接口',
iconPath: '/static/api.png',
selectedIconPath: '/static/apiHL.png'
} as SetTabBarItemOptions
if (this.hasCustomedItem) {
uni.setTabBarItem(tabBarOptions)
} else {
tabBarOptions.text = 'API'
uni.setTabBarItem(tabBarOptions)
}
this.hasCustomedItem = !this.hasCustomedItem
}
}
}
if (this.hasCustomedItem) {
let tabBarOptions = {
index: 1,
text: '接口',
iconPath: '/static/api.png',
selectedIconPath: '/static/apiHL.png'
}
uni.setTabBarItem(tabBarOptions)
}
},
methods: {
navigateBack() {
this.$emit('unmount')
},
setTabBarBadge() {
if (this.hasShownTabBarRedDot) {
uni.hideTabBarRedDot({
index: 1
})
this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
}
if (!this.hasSetTabBarBadge) {
uni.setTabBarBadge({
index: 1,
text: '1'
})
} else {
uni.removeTabBarBadge({
index: 1
})
}
this.hasSetTabBarBadge = !this.hasSetTabBarBadge
},
showTabBarRedDot() {
if (this.hasSetTabBarBadge) {
uni.removeTabBarBadge({
index: 1
})
this.hasSetTabBarBadge = !this.hasSetTabBarBadge
}
if (!this.hasShownTabBarRedDot) {
uni.showTabBarRedDot({
index: 1
})
} else {
uni.hideTabBarRedDot({
index: 1
})
}
this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
},
hideTabBar() {
if (!this.hasHiddenTabBar) {
uni.hideTabBar()
} else {
uni.showTabBar()
}
this.hasHiddenTabBar = !this.hasHiddenTabBar
},
customStyle() {
if (this.hasCustomedStyle) {
uni.setTabBarStyle({
color: '#7A7E83',
selectedColor: '#007AFF',
backgroundColor: '#F8F8F8',
borderStyle: 'black'
})
} else {
uni.setTabBarStyle({
color: '#FFF',
selectedColor: '#007AFF',
backgroundColor: '#000000',
borderStyle: 'black'
})
}
this.hasCustomedStyle = !this.hasCustomedStyle
},
customItem() {
let tabBarOptions = {
index: 1,
text: '接口',
iconPath: '/static/api.png',
selectedIconPath: '/static/apiHL.png'
} as SetTabBarItemOptions
if (this.hasCustomedItem) {
uni.setTabBarItem(tabBarOptions)
} else {
tabBarOptions.text = 'API'
uni.setTabBarItem(tabBarOptions)
}
this.hasCustomedItem = !this.hasCustomedItem
}
}
}
</script>
<style>
.button {
margin-top: 30rpx;
margin-left: 0;
margin-right: 0;
}
.button {
margin-top: 15px;
margin-left: 0;
margin-right: 0;
}
.btn-area {
padding-top: 30rpx;
}
.btn-area {
padding-top: 15px;
}
</style>
components/boolean-data/boolean-data.vue
浏览文件 @ b0603133
<script lang="uts">
export default {
export default {
emits: ['change'],
props: {
title: {
type: String,
default: ''
},
defaultValue: {
type: Boolean,
default: false
}
},
data() {
return {
_checked: false
}
},
created() {
this._checked = this.defaultValue
},
methods: {
// @ts-ignore
_change(e : SwitchChangeEvent) {
this._checked = e.detail.value;
this.$emit('change', this._checked)
}
}
}
props: {
title: {
type: String,
default: ''
},
defaultValue: {
type: Boolean,
default: false
}
},
data() {
return {
_checked: false
}
},
created() {
this._checked = this.defaultValue
},
methods: {
// @ts-ignore
_change(e : SwitchChangeEvent) {
this._checked = e.detail.value;
this.$emit('change', this._checked)
}
}
}
</script>
<template>
<view class="button-data-main uni-flex">
<view class="uni-title" style="width:80%">{{ title }}</view>
<switch :checked="_checked" @change="_change" />
</view>
<view class="button-data-main uni-flex">
<view class="uni-title" style="width:80%">{{ title }}</view>
<switch :checked="_checked" @change="_change" />
</view>
</template>
<style>
.button-data-main {
justify-content: space-between;
padding: 20rpx;
border-bottom: 1px solid rgba(0,0,0,.06);
}
</style>
\ No newline at end of file
.button-data-main {
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
</style>
components/enum-data/enum-data.vue
浏览文件 @ b0603133
......@@ -21,7 +21,7 @@
methods: {
// @ts-ignore
_change(e : RadioGroupChangeEvent) {
const selected = this.items.find((item: ItemType) : boolean => {
const selected = this.items.find((item : ItemType) : boolean => {
return item.name == e.detail.value
})
if (selected != null) {
......
components/input-data/input-data.vue
浏览文件 @ b0603133
......@@ -82,7 +82,8 @@
</view>
</view>
<view class="input-wrapper">
<input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input" @blur="blur" @focus="focus" />
<input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input" @blur="blur"
@focus="focus" />
<image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image>
</view>
......@@ -95,7 +96,7 @@
flex-direction: row;
justify-content: center;
padding: 0;
margin: 0 20rpx;
margin: 0 10px;
flex-direction: row;
flex-wrap: nowrap;
background-color: #ffffff;
......@@ -105,6 +106,6 @@
width: 22px;
height: 22px;
align-self: center;
margin-right: 10rpx;
margin-right: 5px;
}
</style>
components/page-head/page-head.vue
浏览文件 @ b0603133
......@@ -18,11 +18,11 @@
</script>
<style>
.common-page-head {
padding: 20px;
padding: 20px;
align-items: center;
}
.common-page-head-title-box {
.common-page-head-title-box {
padding: 0 20px;
border-bottom: 1px solid #D8D8D8;
}
......
components/u-link/u-link.vue
浏览文件 @ b0603133
<template>
<view class="uni-row">
<text class="text" :href="href" @click="openURL" :inWhiteList="inWhiteList">{{text}}</text>
</view>
<view class="uni-row">
<text class="text" :href="href" @click="openURL" :inWhiteList="inWhiteList">{{text}}</text>
</view>
</template>
<script lang="uts">
/**
* @description u-link是一个外部网页超链接组件，在小程序内打开内部web-view组件或复制url，在app内打开外部浏览器，在h5端打开新网页
* @property {String} href 点击后打开的外部网页url，小程序中必须以https://开头
* @property {String} text 显示的文字
* @property {Boolean} inWhiteList 是否在小程序白名单中，如果在的话，在小程序端会直接打开内置web-view，否则会只会复制url，提示在外部打开
* @example * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link>
*/
export default {
name: 'u-link',
props: {
href: {
type: String,
default: ''
},
text: {
type: String,
default: ''
},
inWhiteList: {
type: Boolean,
default: false
}
},
methods: {
openURL() {
// // #ifdef APP-PLUS
// plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开
// // #endif
// // #ifdef H5
// window.open(this.href)
// // #endif
// // #ifdef MP
// if (this.inWhiteList) { //如果在小程序的网址白名单中，会走内置webview打开，否则会复制网址提示在外部浏览器打开
// uni.navigateTo({
// url: '/pages/component/web-view/web-view?url=' + this.href
// });
// } else {
// uni.setClipboardData({
// data: this.href
// });
// uni.showModal({
// content: '本网址无法直接在小程序内打开。已自动复制网址，请在手机浏览器里粘贴该网址',
// showCancel: false
// });
// }
// // #endif
}
}
}
/**
* @description u-link是一个外部网页超链接组件，在小程序内打开内部web-view组件或复制url，在app内打开外部浏览器，在h5端打开新网页
* @property {String} href 点击后打开的外部网页url，小程序中必须以https://开头
* @property {String} text 显示的文字
* @property {Boolean} inWhiteList 是否在小程序白名单中，如果在的话，在小程序端会直接打开内置web-view，否则会只会复制url，提示在外部打开
* @example * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link>
*/
export default {
name: 'u-link',
props: {
href: {
type: String,
default: ''
},
text: {
type: String,
default: ''
},
inWhiteList: {
type: Boolean,
default: false
}
},
methods: {
openURL() {
// // #ifdef APP-PLUS
// plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开
// // #endif
// // #ifdef H5
// window.open(this.href)
// // #endif
// // #ifdef MP
// if (this.inWhiteList) { //如果在小程序的网址白名单中，会走内置webview打开，否则会复制网址提示在外部浏览器打开
// uni.navigateTo({
// url: '/pages/component/web-view/web-view?url=' + this.href
// });
// } else {
// uni.setClipboardData({
// data: this.href
// });
// uni.showModal({
// content: '本网址无法直接在小程序内打开。已自动复制网址，请在手机浏览器里粘贴该网址',
// showCancel: false
// });
// }
// // #endif
}
}
}
</script>
<style>
.text {
color: #7A7E83;
font-size: 14px;
line-height: 20px;
/* border-bottom: 1px solid #7A7E83; */
}
.text {
color: #7A7E83;
font-size: 14px;
line-height: 20px;
/* border-bottom: 1px solid #7A7E83; */
}
</style>
components/uni-collapse-item/uni-collapse-item.vue
浏览文件 @ b0603133
<template>
<view class="uni-collapse-item">
<view class="uni-collapse-item__title" @click="openCollapse(!is_open)">
<text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text>
<view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
</view>
<view ref="boxRef" class="uni-collapse-item__content">
<view ref="contentRef" class="uni-collapse-item__content-box">
<slot></slot>
</view>
</view>
</view>
<view class="uni-collapse-item">
<view class="uni-collapse-item__title" @click="openCollapse(!is_open)">
<text class="uni-collapse-item__title-text"
:class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text>
<view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
</view>
<view ref="boxRef" class="uni-collapse-item__content">
<view ref="contentRef" class="uni-collapse-item__content-box">
<slot></slot>
</view>
</view>
</view>
</template>
<script lang="uts">
import { $dispatch } from './util.uts'
export default {
name: "UniCollapseItem",
props: {
// 列表标题
title: {
type: String,
default: ''
},
open: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
height: 0,
is_open: this.open as boolean,
boxNode: null as Element | null,
contentNode: null as Element | null,
};
},
watch: {
open(value: boolean) {
// this.is_open = value
if (this.boxNode != null) {
this.openCollapse(value)
}
}
},
created() {
$dispatch(this, 'UniCollapse', 'init', this)
},
mounted() {
this.boxNode = this.$refs['boxRef'] as Element;
this.contentNode = this.$refs['contentRef'] as Element;
// this.openCollapse(this.open)
},
methods: {
// 开启或关闭折叠面板
openCollapse(open: boolean) {
if (this.disabled) return
// 关闭其他已打开
$dispatch(this, 'UniCollapse', 'cloceAll')
this.is_open = open
this.openOrClose(open)
},
openOrClose(open: boolean) {
const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none';
const opacity = open ? "1" : "0"
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide);
this.$nextTick(() => {
contentNode.setProperty('transform', ani_transform);
contentNode.setProperty('opacity', opacity);
})
}
}
}
import { $dispatch } from './util.uts'
export default {
name: "UniCollapseItem",
props: {
// 列表标题
title: {
type: String,
default: ''
},
open: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
height: 0,
is_open: this.open as boolean,
boxNode: null as Element | null,
contentNode: null as Element | null,
};
},
watch: {
open(value : boolean) {
// this.is_open = value
if (this.boxNode != null) {
this.openCollapse(value)
}
}
},
created() {
$dispatch(this, 'UniCollapse', 'init', this)
},
mounted() {
this.boxNode = this.$refs['boxRef'] as Element;
this.contentNode = this.$refs['contentRef'] as Element;
// this.openCollapse(this.open)
},
methods: {
// 开启或关闭折叠面板
openCollapse(open : boolean) {
if (this.disabled) return
// 关闭其他已打开
$dispatch(this, 'UniCollapse', 'cloceAll')
this.is_open = open
this.openOrClose(open)
},
openOrClose(open : boolean) {
const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none';
const opacity = open ? "1" : "0"
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide);
this.$nextTick(() => {
contentNode.setProperty('transform', ani_transform);
contentNode.setProperty('opacity', opacity);
})
}
}
}
</script>
<style scoped>
.uni-collapse-item {
background-color: #fff;
}
.uni-collapse-item__title {
flex-direction: row;
align-items: center;
padding: 12px;
background-color: #fff;
}
.uni-collapse-item {
background-color: #fff;
}
.uni-collapse-item__title {
flex-direction: row;
align-items: center;
padding: 12px;
background-color: #fff;
}
.down_arrow {
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px #999 solid;
border-bottom: 1px #999 solid;
margin-top: -3px;
transition-property: transform;
transition-duration: 0.2s;
}
.down_arrow {
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px #999 solid;
border-bottom: 1px #999 solid;
margin-top: -3px;
transition-property: transform;
transition-duration: 0.2s;
}
.down_arrow--active {
transform: rotate(-135deg);
margin-top: 0px;
}
.down_arrow--active {
transform: rotate(-135deg);
margin-top: 0px;
}
.uni-collapse-item__title-text {
flex: 1;
color: #000;
font-size: 14px;
font-weight: 400;
}
.uni-collapse-item__title-text {
flex: 1;
color: #000;
font-size: 14px;
font-weight: 400;
}
.open--active {
/* background-color: #f0f0f0; */
color: #bbb;
}
.open--active {
/* background-color: #f0f0f0; */
color: #bbb;
}
.is-disabled {
color: #999;
}
.is-disabled {
color: #999;
}
.uni-collapse-item__content {
display: none;
position: relative;
}
.uni-collapse-item__content {
display: none;
position: relative;
}
.uni-collapse-item__content-box {
width: 100%;
transition-property: transform , opacity;
transition-duration: 0.2s;
transform: translateY(-100%);
opacity: 0;
}
</style>
.uni-collapse-item__content-box {
width: 100%;
transition-property: transform, opacity;
transition-duration: 0.2s;
transform: translateY(-100%);
opacity: 0;
}
</style>
components/uni-collapse/uni-collapse.vue
浏览文件 @ b0603133
<template>
<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
<view>
<slot></slot>
</view>
<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
<view>
<slot></slot>
</view>
</template>
<script lang="uts">
export default {
name: "UniCollapse",
props: {
// 是否开启手风琴效果
accordion: {
type: Boolean,
default: true
}
},
data() {
return {
child_nodes: [] as Array<ComponentPublicInstance>
};
},
export default {
name: "UniCollapse",
props: {
// 是否开启手风琴效果
accordion: {
type: Boolean,
default: true
}
},
data() {
return {
child_nodes: [] as Array<ComponentPublicInstance>
};
},
methods: {
init(child: ComponentPublicInstance) {
this.child_nodes.push(child)
},
// 关闭所有
cloceAll() {
// 开启手风琴效果才回关闭其他
if (this.accordion && this.child_nodes.length > 0) {
this.child_nodes.forEach((item) => {
const is_open = item.$data['is_open'] as boolean
// TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
if (is_open) {
item.$data['is_open'] = false
item.$callMethod('openOrClose', false)
}
})
}
}
}
}
methods: {
init(child : ComponentPublicInstance) {
this.child_nodes.push(child)
},
// 关闭所有
cloceAll() {
// 开启手风琴效果才回关闭其他
if (this.accordion && this.child_nodes.length > 0) {
this.child_nodes.forEach((item) => {
const is_open = item.$data['is_open'] as boolean
// TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
if (is_open) {
item.$data['is_open'] = false
item.$callMethod('openOrClose', false)
}
})
}
}
}
}
</script>
<style>
......
components/uni-navbar-lite/uni-navbar-lite.uvue
浏览文件 @ b0603133
......@@ -95,7 +95,6 @@
.uni-navbar-inner {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 45px;
......@@ -103,7 +102,6 @@
.left-content,
.right-content {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
......@@ -117,7 +115,6 @@
bottom: 0;
left: 45px;
right: 45px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
......
components/uni-navbar-lite/uni-navbar-lite.vue
浏览文件 @ b0603133
<template>
<view class="uni-navbar">
<view class="uni-navbar-inner" :style="navbarStyle">
<view class="left-content" @click="back">
<text class="uni-icons uniui-back"></text>
</view>
<view class="uni-navbar-content">
<slot>{{title}}</slot>
</view>
<view class="right-content">
<slot name="right"></slot>
</view>
</view>
<view class="uni-navbar">
<view class="uni-navbar-inner" :style="navbarStyle">
<view class="left-content" @click="back">
<text class="uni-icons uniui-back"></text>
</view>
<view class="uni-navbar-content">
<slot>{{title}}</slot>
</view>
<view class="right-content">
<slot name="right"></slot>
</view>
</view>
</view>
</template>
<script>
export default {
name: "uni-navbar",
props: {
title: {
type: String,
default: ''
}
},
data() {
return {
statusBarHeight: 0
};
},
computed: {
navbarStyle() {
return `margin-top:${this.statusBarHeight}px`
},
},
created() {
const sys = uni.getSystemInfoSync()
const statusBarHeight = sys.statusBarHeight
this.statusBarHeight = statusBarHeight
},
methods: {
back() {
uni.navigateBack({})
}
},
}
export default {
name: "uni-navbar",
props: {
title: {
type: String,
default: ''
}
},
data() {
return {
statusBarHeight: 0
};
},
computed: {
navbarStyle() {
return `margin-top:${this.statusBarHeight}px`
},
},
created() {
const sys = uni.getSystemInfoSync()
const statusBarHeight = sys.statusBarHeight
this.statusBarHeight = statusBarHeight
},
methods: {
back() {
uni.navigateBack({})
}
},
}
</script>
<style>
@import './uni-icons.css';
@import './uni-icons.css';
.uni-icons {
font-family: UniIconsLight;
text-decoration: none;
text-align: center;
font-size: 22px;
font-style: normal;
color: #333;
}
.uni-icons {
font-family: UniIconsLight;
text-decoration: none;
text-align: center;
font-size: 22px;
font-style: normal;
color: #333;
}
.uni-navbar {
border: 1px #eee solid;
background-color: #fff;
}
.uni-navbar {
border: 1px #eee solid;
background-color: #fff;
}
.uni-navbar-inner {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 45px;
}
.uni-navbar-inner {
position: relative;
flex-direction: row;
justify-content: space-between;
height: 45px;
}
.left-content,
.right-content {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 100%;
}
.left-content,
.right-content {
justify-content: center;
align-items: center;
width: 45px;
height: 100%;
}
.uni-navbar-content {
position: absolute;
height: 100%;
top: 0;
bottom: 0;
left: 45px;
right: 45px;
display: flex;
justify-content: center;
align-items: center;
}
.uni-navbar-content {
position: absolute;
height: 100%;
top: 0;
bottom: 0;
left: 45px;
right: 45px;
justify-content: center;
align-items: center;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或