当前位置: 首页 > news >正文

uniapp自定义头部导航怎么实现?

一、在pages.json文件里边写上自定义属性

"navigationStyle": "custom"

二、在对应的index页面写上以下:

<view :style="{ height: headheight + 'px', backgroundColor: '#24B7FF', zIndex: 99, position: 'fixed', top: '0px', width: '100%' }">
</view>
<view class="head" :style="{ top: headheight + 'px', backgroundColor: '#24B7FF' }"><view>新乡市</view>
</view>
<view style="height: 100rpx;"></view>

三、在script标签的return里边写上

headheight: '',

四、在onLoad()周期里面写上

const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.statusBarHeight;
this.headheight = windowHeight;

五、style

.head {display: flex;justify-content: center;align-items: center;position: fixed;height: 100rpx;width: 100%;z-index: 99;}

效果:

http://www.lryc.cn/news/266473.html

相关文章:

  • 什么是 Dubbo?它有哪些核心功能?
  • (2021|CoRR,AugCLIP,优化)FuseDream:通过改进的 CLIP+GAN 空间优化实现免训练文本到图像生成
  • python pip安装依赖的常用软件源
  • 避免大M取值过大引起的数值问题
  • 史密斯圆图的使用
  • 可重复读解决了哪些问题? 对 SQL 慢查询会考虑哪些优化 ?
  • 从0开始python学习-35.allure报告企业定制
  • 蓝桥杯2020年10月青少组Python程序设计省赛真题
  • 【数据结构】布隆过滤器原理详解及其代码实现
  • Qt中实现短信验证码功能
  • Redis-运维
  • Qt制作定时关机小程序
  • LeetCode day30
  • 数据分析基础之《numpy(5)—合并与分割》
  • centos 安装 Miniconda
  • 第二百二十六回
  • ubuntu常用指令
  • Quartz.NET 事件监听器
  • 2024-AI人工智能学习-安装了pip install pydot但是还是报错
  • 在使用mapstruct,想忽略掉List<DTO>字段里面的,`data` 字段的映射, 如何写ignore: 使用@IterableMapping
  • ansible-playbook的Temlates模块 tags模块 Roles模块
  • Canal使用详解
  • 【经典LeetCode算法题目专栏分类】【第8期】滑动窗口:最小覆盖子串、字符串排列、找所有字母异位词、 最长无重复子串
  • C#和.Net常见问题记录
  • FAQ:Container Classes篇
  • 每日一题(LeetCode)----栈和队列--滑动窗口最大值
  • 13.bash shell中的if-then语句
  • 深入了解 Python 的 import 语句
  • 接口测试 — 11.logging日志模块处理流程
  • Hago 的 Spark on ACK 实践