nuiapp 自定义头部

最新推荐文章于 2024-09-29 18:25:44 发布

杨淮叶

最新推荐文章于 2024-09-29 18:25:44 发布

阅读量554

点赞数

CC 4.0 BY-SA版权

文章标签： json 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_51140337/article/details/127675417

一般在nuiapp的pages.json配置路由时是这样的

在style的里面加上 "navigationStyle": "custom" //代表自定义头部

在配置好了之后在你想自定义的页面添加

<template>
   <view>
       <view class="header" :style="style">
           <view class="flexbox"
               :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleColor, 'background': bgColor}]">
               <view @click="goBack" style="font-size: 36rpx;">
                   <u-icon name="arrow-left"></u-icon>
               </view>
               <view>提交驳回原因</view>
               <view style="width: 36px;"></view>
           </view>
       </view>
   </view>
</template>

然后就是data

data() {
           return {
               statusBarH: 0,
               customBarH: 0,
               titleColor: '#000',
               bgColor: '#fff'
           }
       },

created() {
           let self = this;
           uni.getSystemInfo({
               success: function(e) {
                   self.statusBarH = e.statusBarHeight + 10
                   self.customBarH = e.statusBarHeight + 46
               }
           })
       }

然后就是css

.header {
width: 100vw;
}

   .flexbox {
       display: flex;
       justify-content: space-between;
       padding: 0 8rpx;
   }

就可以运行出来了