Skip to content

H
hello uni-id-pages-x

DCloud / hello uni-id-pages-x

通知 43
Star 0
Fork 0
H
hello uni-id-pages-x
提交 6d189a96 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

更新 移动uni-navbar-lite到 uni-id-pages-x 里面

上级 4eaf406d
隐藏空白更改
内联 并排
Showing with 209 addition and 209 deletion
components/uni-navbar-lite/uni-navbar-lite.uvue → uni_modules/uni-id-pages-x/components/uni-navbar-lite/uni-navbar-lite.uvue
浏览文件 @ 6d189a96
<template> <template>
<view class="uni-navbar"> <view class="uni-navbar">
<view class="uni-navbar-inner" :style="navbarStyle"> <view class="uni-navbar-inner" :style="navbarStyle">
<view class="left-content" @click="back"> <view class="left-content" @click="back">
<text :style="{ color: textColor }" class="uni-icons">{{ <text :style="{ color: textColor }" class="uni-icons">{{
unicode unicode
}}</text> }}</text>
</view> </view>
<view class="uni-navbar-content" :class="{ 'is-left': isLeft }"> <view class="uni-navbar-content" :class="{ 'is-left': isLeft }">
<text :style="{ color: textColor }"> <text :style="{ color: textColor }">
<slot>{{ title }}</slot> <slot>{{ title }}</slot>
</text> </text>
</view> </view>
<view class="right-content"> <view class="right-content">
<slot name="right"></slot> <slot name="right"></slot>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import iconpath from "./uniicons.ttf"; import iconpath from "./uniicons.ttf";
export default { export default {
name: "uni-navbar", name: "uni-navbar",
props: { props: {
title: { title: {
type: String, type: String,
default: "", default: "",
}, },
isLeft: { isLeft: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
textColor: { textColor: {
type: String, type: String,
default: "#000", default: "#000",
}, },
}, },
data() { data() {
return { return {
statusBarHeight: 0, statusBarHeight: 0,
}; };
}, },
computed: { computed: {
navbarStyle() : string { navbarStyle() : string {
return `margin-top:${this.statusBarHeight}px`; return `margin-top:${this.statusBarHeight}px`;
}, },
unicode() : string { unicode() : string {
return "\ue600"; return "\ue600";
}, },
}, },
created() { created() {
uni.loadFontFace({ uni.loadFontFace({
global: false, global: false,
family: "UniIconsFontFamily", family: "UniIconsFontFamily",
source: `url("${iconpath}")`, source: `url("${iconpath}")`,
success() { }, success() { },
fail(err) { fail(err) {
console.log(err); console.log(err);
}, },
}); });
const sys = uni.getSystemInfoSync(); const sys = uni.getSystemInfoSync();
const statusBarHeight = sys.statusBarHeight; const statusBarHeight = sys.statusBarHeight;
this.statusBarHeight = statusBarHeight; this.statusBarHeight = statusBarHeight;
}, },
mounted() { mounted() {
uni.setNavigationBarColor({ uni.setNavigationBarColor({
frontColor: "#000000", frontColor: "#000000",
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
}); });
}, },
methods: { methods: {
back() { back() {
uni.navigateBack({}); uni.navigateBack({});
}, },
}, },
}; };
</script> </script>
<style> <style>
.uni-icons { .uni-icons {
font-family: "UniIconsFontFamily" !important; font-family: "UniIconsFontFamily" !important;
font-size: 26px; font-size: 26px;
font-style: normal; font-style: normal;
color: #333; color: #333;
} }
.uni-navbar { .uni-navbar {
background-color: #fff; background-color: #fff;
} }
.uni-navbar-inner { .uni-navbar-inner {
position: relative; position: relative;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 45px; height: 45px;
} }
.left-content, .left-content,
.right-content { .right-content {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 18%; width: 18%;
height: 100%; height: 100%;
} }
.uni-navbar-content { .uni-navbar-content {
position: absolute; position: absolute;
height: 100%; height: 100%;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 45px; left: 45px;
right: 45px; right: 45px;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-left { .is-left {
justify-content: flex-start; justify-content: flex-start;
} }
</style> </style>
components/uni-navbar-lite/uni-navbar-lite.vue → uni_modules/uni-id-pages-x/components/uni-navbar-lite/uni-navbar-lite.vue
浏览文件 @ 6d189a96
<template> <template>
<view class="uni-navbar"> <view class="uni-navbar">
<view class="uni-navbar-inner" :style="navbarStyle"> <view class="uni-navbar-inner" :style="navbarStyle">
<view class="left-content" @click="back"> <view class="left-content" @click="back">
<text class="uni-icons uniui-back"></text> <text class="uni-icons uniui-back"></text>
</view> </view>
<view class="uni-navbar-content"> <view class="uni-navbar-content">
<slot>{{title}}</slot> <slot>{{title}}</slot>
</view> </view>
<view class="right-content"> <view class="right-content">
<slot name="right"></slot> <slot name="right"></slot>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: "uni-navbar", name: "uni-navbar",
props: { props: {
title: { title: {
type: String, type: String,
default: '' default: ''
} }
}, },
data() { data() {
return { return {
statusBarHeight: 0 statusBarHeight: 0
}; };
}, },
computed: { computed: {
navbarStyle() { navbarStyle() {
return `margin-top:${this.statusBarHeight}px` return `margin-top:${this.statusBarHeight}px`
}, },
}, },
created() { created() {
const sys = uni.getSystemInfoSync() const sys = uni.getSystemInfoSync()
const statusBarHeight = sys.statusBarHeight const statusBarHeight = sys.statusBarHeight
this.statusBarHeight = statusBarHeight this.statusBarHeight = statusBarHeight
}, },
methods: { methods: {
back() { back() {
uni.navigateBack({}) uni.navigateBack({})
} }
}, },
} }
</script> </script>
<style> <style>
@import './uni-icons.css'; @import './uni-icons.css';
.uni-icons { .uni-icons {
font-family: UniIconsLight; font-family: UniIconsLight;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
font-size: 22px; font-size: 22px;
font-style: normal; font-style: normal;
color: #333; color: #333;
} }
.uni-navbar { .uni-navbar {
border: 1px #eee solid; border: 1px #eee solid;
background-color: #fff; background-color: #fff;
} }
.uni-navbar-inner { .uni-navbar-inner {
position: relative; position: relative;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 45px; height: 45px;
} }
.left-content, .left-content,
.right-content { .right-content {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 45px; width: 45px;
height: 100%; height: 100%;
} }
.uni-navbar-content { .uni-navbar-content {
position: absolute; position: absolute;
height: 100%; height: 100%;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 45px; left: 45px;
right: 45px; right: 45px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或