uniapp自定义导航栏以及页面加背景

如果想给uniapp的页面加背景图片的话,疯狂度了之后会发现uniapp中背景图片用本地图片不起效果,所以一般用网络路径,之后又会发现,页面如果直接加背景的话有可能会遇到页面内容不够,背景撑不满整个页面,如果给页面根元素加 height: 100vh;的话页面上的东西就没法滚动了,所以最好是结合scroll-view一起做。

pages.json中:

		{"path": "pages/hotelInfo/hotelInfo","style": {"navigationStyle": "custom",	//自定义导航栏"enablePullDownRefresh": false,	//关闭页面下拉刷新"disableScroll": true			//不允许页面滑动}}

页面:

<template><view class="ye"><scroll-view scroll-y="true" class="scrollView" @scroll="scroll"><view class="fanhui" :class="{isNavbar : isNavbar}":style="{paddingTop:paddingTop + 'px',height:height + 'px'}"><view class="content"><uni-icons :size="height * 0.8 + 'px'" color="#000000" type="back" @click="goBack()"></uni-icons><view class="title">页面标题</view></view></view><view class="contentC"></view></scroll-view></view>
</template><script>export default {data() {return {height: 0,paddingTop: 0,isNavbar: false,};},onLoad(query) {//设置导航条参数let menuButtonInfo = uni.getMenuButtonBoundingClientRect();this.paddingTop = menuButtonInfo.top;this.height = menuButtonInfo.height;},methods: {goBack() {// uni.navigateBack()uni.reLaunch({url: "/pages/home/home"})},scroll(e){console.log(e)const scrollTop = e.detail.scrollTop;// 导航条颜色透明渐变if (scrollTop <= 50) {this.isNavbar = false} else {this.isNavbar = true}}}};
</script><style lang="scss">.ye {height: 100vh;@keyframes backgroundColorAnimation {0% {background-color: transparent;}100% {background-color: #fef2e9;}}.isNavbar {background-color: #fef2e9;animation: backgroundColorAnimation 0.5s;}.fanhui {z-index: 9;width: 100%;color: #100F0F;position: fixed;.content {width: 94%;height: 100%;margin: 0 auto;display: flex;align-items: center;.title {font-weight: 500;font-size: 32rpx;left: 50%;position: absolute;transform: translateX(-50%);}}}.scrollView {width: 100%;height: 100%;background-image: url("https://cdn.15803565366.com/uniapp/bg.png");background-repeat: no-repeat;background-size: cover;}.contentC{padding: 26rpx;box-sizing: border-box;}}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/54273.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何编写智能合约——基于长安链的Go语言的合约开发

场景设计&#xff1a;文件存证系统 在数字化时代&#xff0c;文件存证和版本追踪变得越来越重要。设想一个场景&#xff1a;在一个法律事务管理系统中&#xff0c;用户需要提交和管理各种文件的版本记录&#xff0c;以确保每个文件在不同时间点的状态可以被准确追踪。文件可能经…

mac新手入门(快捷键)

系统常用快捷键 基本操作 Command-Z 撤销Command-X 剪切  Command-C 拷贝&#xff08;Copy&#xff09; Option Shift Command V 纯文本拷贝 Command-V 粘贴  Command-A 全选&#xff08;All&#xff09;Command-S 保存&#xff08;Save) Command-F 查找&#xff0…

实现实时Web应用,使用AJAX轮询、WebSocket、还是SSE呢??

文章目录 短轮询&#xff08;Short Polling&#xff09;长轮询&#xff08;Long Polling&#xff09;Comet “服务器推” &#xff08;这玩意现在用的很少了&#xff0c;了解一下即可&#xff09;WebSocket原理&#xff1a;方法&#xff1a;事件&#xff1a; SSE原理事件 总结 …

MyBatisPlus 使用 IPage 分页

3.4.0之前版本 Beanpublic PaginationInterceptor paginationInterceptor() {PaginationInterceptor paginationInterceptor new PaginationInterceptor();paginationInterceptor.setLimit(-1);paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));r…

安全建设当中的冷门知识

今天说点有趣的话题&#xff0c;也是因为在安全建设过程中&#xff0c;安全员也不太可能都按照最理想的状态去工作&#xff0c;有资源的问题&#xff0c;有管理惰性问题&#xff0c;当然也有管理者本身决策的问题。 安全行业起步较晚&#xff0c;16年才施行网络安全法&#xff…

【JAVA】数据脱敏技术(对称加密算法、非对称加密算法、哈希算法、消息认证码(MAC)算法、密钥交换算法)使用方法

文章目录 数据脱敏的定义和目的数据脱敏的技术分类对称加密算法非对称加密算法哈希算法消息认证码&#xff08;MAC&#xff09;算法密钥交换算法 数据脱敏的技术方案实现字符替换哈希算法&#xff08;例如:SHA-3 算法&#xff09;消息认证码&#xff08;MAC&#xff09;算法(CM…

代理导致的git错误

问题&#xff1a; 今天在clone时出现如下错误&#xff1a; fatal: unable to access https://github.com/NirDiamant/RAG_Techniques.git/: Failed to connect to 127.0.0.1 port 10089 after 2065 ms: Couldnt connect to server真是让人感到奇怪&#xff01;就在前天&#…

影刀RPE学习——自动化

下载网址&#xff1a;影刀RPA - 影刀官网 (yingdao.com) 傻瓜式安装进入界面&#xff1a; 官方教程&#xff1a;影刀RPA零基础入门教程&#xff08;2024最新版&#xff09;&#xff1a;01 引入课-影刀初相识_哔哩哔哩_bilibili

Unity Hub自动安装指定版本Unity的Android开发环境

Unity开发Android环境要求SDK、DNK、JDK、Gradle版本都要对才能发布APK&#xff0c;自己去配置很容易出错。Unity Hub可以自动安装指定版本Unity的Android开发环境。 1.安装国内用的UnityHub&#xff08;我这里用的3.3.2-c6&#xff09; 2.找到对应的Unity版本 3.点击【从Unit…

职场 Death Note

场景一 测试&#xff1a;哎&#xff0c;怎么会这样呢&#xff1f;时间没到&#xff0c;他怎么就变成这个样子了呢&#xff1f;一副大惊小怪&#xff0c;整个办公室都是他的声音 开发&#xff1a;对对对&#xff0c;我代码问题&#xff0c;别BB了。 你直接说这个地方不对&#…

【Kubernetes】常见面试题汇总(十九)

目录 59.简述 Kubernetes 所支持的存储供应模式&#xff1f; 60.简述 Kubernetes CSl 模型&#xff1f; 61.简述 Kubernetes Worker节点加入集群的过程&#xff1f; 59.简述 Kubernetes 所支持的存储供应模式&#xff1f; Kubernetes 支持两种资源的存储供应模式&#xff1a…

sqlgun靶场训练

1.看到php&#xff1f;id &#xff0c;然后刚好有个框&#xff0c;直接测试sql注入 2.发现输入1 union select 1,2,3#的时候在2处有回显 3.查看表名 -1 union select 1,group_concat(table_name),3 from information_schema.tables where table_schemadatabase()# 4.查看列名…

【自动驾驶】决策规划算法 | 数学基础(三)直角坐标与自然坐标转换Ⅱ

写在前面&#xff1a; &#x1f31f; 欢迎光临 清流君 的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落。&#x1f4dd; 个人主页&#xff1a;清流君_CSDN博客&#xff0c;期待与您一同探索 移动机器人 领域的无限可能。 &#x1f50d; 本文系 清流君 原创之作&…

Karpathy认为“LLM”这个名字不准确 马斯克非常赞同

LLM 应该改名吗&#xff1f;你怎么看。在 AI 领域&#xff0c;几乎每个人都在谈论大型语言模型&#xff0c;其英文全称为 Large Language Models&#xff0c;简写为 LLM。因为 LLM 中有“Language”一词&#xff0c;因此&#xff0c;大家默认这种技术和语言密切相关。然而&…

Rust:深入浅出说一说 Error 类型

1. Rust 的错误返回机制 Rust 函数计算过程如果发生错误怎么办&#xff1f;Rust没有采取 C 的异常机制&#xff0c;而是允许直接返回错误信息。 这意味着&#xff0c;Rust 提供了错误返回机制&#xff0c;允许函数正常结束时返回计算结果&#xff0c;同时&#xff0c;如果计算…

纯小白安装pytorch(快速上手)

1.首先进入你的虚拟环境(不进入也没关系) 在anaconda prompt中打开&#xff0c;输入activate 虚拟环境2.查看自己的conda源 conda config --show channels3.清空自己的conda源 conda config --remove-key channels4.添加源 conda config --add channels https://mirrors.tu…

蓝桥杯-STM32G431RBT6(解决LCD与LED引脚冲突的问题)

一、LCD与LED为什么会引脚冲突 LCD与LED引脚共用。 网上文章是在LCD_WriteRAM、LCD_WriteRAM_Prepare、LCD_WriteReg中添加&#xff0c;但问题并没有解决。 二、使用步骤 在如下函数中加入uint16_t tempGPIOC->ODR; GPIOC->ODRtemp; LCD_Init(); void LCD_C…

动态规划:07.路径问题_珠宝的最大价值_C++

题目链接&#xff1a;LCR 166. 珠宝的最高价值 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/li-wu-de-zui-da-jie-zhi-lcof/description/ 一、题目解析 题目&#xff1a; 解析&#xff1a; 有过做前几道题的经验&#xff0c;我们会发现这道题其实就…

IDEA甚至前进后退跳转键

1&#xff1a;快捷键设置 idea设置前进、后退快捷键_idea后退前进快捷键-CSDN博客 2&#xff1a;界面设置 IDEA添加“前进 后退 ”添加到工具栏_idea 最新社区版 左右箭头怎么设置-CSDN博客

安卓显示驱动

安卓显示驱动是用于在Android设备上提供图形和视频显示的底层软件组件。 显示驱动在Android系统中扮演着至关重要的角色&#xff0c;它们负责将图形和视频内容从系统内存传输到显示屏上。这些驱动程序确保了用户界面、图像、视频和游戏等视觉元素的正常显示。以下是关于安卓显…