123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <view class="navbar custom-class" :style="{ 'height': navHeight+'px' }">
- <view class="navbar-action-wrap navbar-action-group row item-center" :style="{'top': navTop+'px'}">
- <view v-if="isBack" class="navbar-action_item" @tap="navBack">
- <u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>
- </view>
- <view v-if="isMap" class="navbar-action_item last map-bar" @tap="toMap">
- <u-image class="map-icon" width="24rpx" height="36rpx" src="/static/map-icon.png"></u-image>
- <view class="item-label">清运地图</view>
- </view>
- </view>
- <view class='navbar-title' :style="{'top': navTop+'px'}">
- {{pageName}}
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- pageName: String,
- showNav:{
- type: Boolean,
- value: true
- },
- bgColor: {
- type: String,
- value: '#fff'
- },
- isBack: {
- type: Boolean,
- value: false
- },
- isMap: {
- type: Boolean,
- value: false
- }
- },
- mounted() {
- let menuButtonObject = wx.getMenuButtonBoundingClientRect()
- const _this = this
- wx.getSystemInfo({
- success (res) {
- let statusBarHeight = res.statusBarHeight,
- navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
- navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
- _this.navHeight = navHeight;
- _this.navTop = navTop;
- _this.windowHeight = res.windowHeight;
- }
- })
- },
- data() {
- return {
- navHeight: '',
- navTop: '',
- windowHeight: ''
- }
- },
- methods: {
- //回退
- navBack: function () {
- uni.navigateBack({
- delta: 1
- })
- },
- //配送地图
- toMap: function () {
- uni.navigateTo({
- url: '/pages/index/map'
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .navbar {
- width: 100%;
- overflow: hidden;
- position: relative;
- top: 0;
- left: 0;
- z-index: 10;
- flex-shrink: 0;
- .navbar-action-wrap {
- display: -webkit-flex;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- position: absolute;
- left: 10px;
- z-index: 11;
- line-height: 1;
- padding-top: 8px;
- padding-bottom: 4px;
- }
- .navbar-action-group {
- overflow: hidden;
- .navbar-action_item {
- border-right: 1px solid #f0f0f0;
- color: #333;
- }
- .last {
- border-right: none;
- }
- .map-bar{
- text-align: center;
- .map-icon{
- display: inline-block;
- margin-right: 10rpx;
- }
- .item-label{
- display: inline-block;
- font-size: 24rpx;
- vertical-align: text-top;
- color: #07c160;
- }
- }
- }
- .navbar-title {
- width: 100%;
- box-sizing: border-box;
- padding-left: 115px;
- padding-right: 115px;
- height: 32px;
- line-height: 32px;
- text-align: center;
- position: absolute;
- left: 0;
- z-index: 10;
- color: #333;
- font-size: 16px;
- font-weight: bold;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- }
- </style>
|