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.rhkb.cn/news/428032.html

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

相关文章

weblogic CVE-2020-14882 靶场攻略

漏洞描述 32 CVE-2020-14882 允许远程⽤户绕过管理员控制台组件中的身份验证。 CVE-2020-14883 允许经过身份验证的⽤户在管理员控制台组件上执⾏任何命令。 使⽤这两个漏洞链&#xff0c;未经身份验证的远程攻击者可以通过 HTTP 在 Oracle WebLogic 服务器上执⾏任意命令并…

深度学习(一)——CMC特刊推荐

点击蓝字 关注我们 特刊征稿 01 期刊名称&#xff1a; Multimedia Security in Deep Learning 截止时间&#xff1a; 提交截止日期:2024年9月30日 目标及范围&#xff1a; 题为“深度学习中的多媒体安全”的特刊是一个平台&#xff0c;旨在推动深度学习在多媒体安全领域的创…

Gitlab学习(007 gitlab项目操作)

尚硅谷2024最新Git企业实战教程&#xff0c;全方位学习git与gitlab 总时长 5:42:00 共40P 此文章包含第25p-第p26的内容 文章目录 推送项目到gitlabidea安装gitlab插件配置免密登录推送项目到远程库 在gitlab上创建项目额外功能的使用推送分支到远程库标记功能创建合并请求 推…

Matlab R2024B软件安装教程

一、新版本特点 MATLAB R2024B版本带来了众多新特性和改进&#xff0c;旨在提升用户的内容创作体验和工程效率。以下是该版本的一些主要特点&#xff1a; 1. 性能提升和优化&#xff1a;R2024B版本在性能上进行了显著优化&#xff0c;无论是在提问、回答问题、发布新技巧还是…

leaflet加载GeoServer的WMS地图服务.md

leaflet加载GeoServer的WMS地图服务&#xff0c;该示例涵盖了涵盖了 “WMS图层加载、WMS图层动态投影、图层index顺序调整、图层添加、高德地图、腾讯地图OpenStreet地图”&#xff0c;WMS图层加载看代码中标注的核心代码部分即可。 <!DOCTYPE html> <html xmlns&qu…

介绍个酷炫,适合装逼的命令

Hollywood - 给你的命令行加点魔法般的动画效果 作为命令行的重度用户,你是否想让枯燥的终端界面来点生动有趣的元素?Hollywood来了!这是一个无比诙谐、小巧玲珑而又功能强大的动画效果命令行工具。 Hollywood可以为文本添加各种动画效果,让你的输出显示得像电影般生动活泼。…

MYSQL面试知识点手册

第一部分&#xff1a;MySQL 基础知识 1.1 MySQL 简介 MySQL 是世界上最流行的开源关系型数据库管理系统之一&#xff0c;它以性能卓越、稳定可靠和易用性而闻名。MySQL 主要应用在 Web 开发、大型互联网公司、企业级应用等场景&#xff0c;且广泛用于构建高并发、高可用的数据…

react 基础语法

前置知识 类的回顾 通过class关键字定义一个类 类名首字母大写 class类有constructor构造器 new 一个类得到一个实例 类还有方法&#xff0c;该方法也会在其原型上 static静态数据&#xff0c;访问静态属性通过 类名.id getter和setter getter&#xff1a;定义一个属性&…

计算机人工智能前沿进展-大语言模型方向-2024-09-20

计算机人工智能前沿进展-大语言模型方向-2024-09-20 1. Multimodal Fusion with LLMs for Engagement Prediction in Natural Conversation Authors: Cheng Charles Ma, Kevin Hyekang Joo, Alexandria K. Vail, Sunreeta Bhattacharya, Alvaro Fern’andez Garc’ia, Kailan…

day51

shell脚本 修改环境变量 1) 查看已有的特殊系统变量 系统配置好的&#xff0c;内置的环境 env 或者 printenv 2) 查看环境变量 echo $HOME 环境变量的作用&#xff1a; 当在终端直接运行指令时&#xff0c;会默认去环境变量保存的路径中查找指令&#xff0c;如果没找到该…

Zookeeper安装使用教程

# 安装 官网下载安装包 #配置文件 端口默认8080&#xff0c;可能需要更改一下 #启动 cd /Users/lisongsong/software/apache-zookeeper-3.7.2-bin/bin ./zkServer.sh start #查看运行状态 ./zkServer.sh status #停止 ./zkServer.sh stop #启动客户端 ./zkCli.sh ls /

【高分系列卫星简介】

高分系列卫星是中国国家高分辨率对地观测系统&#xff08;简称“高分工程”&#xff09;的重要组成部分&#xff0c;旨在提供全球范围内的高分辨率遥感数据&#xff0c;广泛应用于环境监测、灾害应急、城市规划、农业估产等多个领域。以下是对高分系列卫星及其数据、相关参数和…

英语六级-学习

01 英语分值比例 02听力学习 听力练习&#xff0c;基础好选择标准VOA和BBC。基础差选择VOA慢速。 听力内容包括不受政治争议的内容&#xff0c;社会生活类(奇闻趣事、日常生活)、经济类(商务、职场相关)、环保类、互联网类---------根据各类主题快速找到录音材料中心点。 研…

搭建本地DVWA靶场教程 及 靶场使用示例

1. DVWA简介 DVWA&#xff08;Damn Vulnerable Web Application&#xff09;一个用来进行安全脆弱性鉴定的PHP/MySQL Web 应用平台&#xff0c;旨在为网络安全专业人员测试自己的专业技能和工具提供合法的环境&#xff0c;帮助web开发者更好的理解web应用安全防范的过程。 DVW…

数据结构之二叉树(1)

数据结构之二叉树&#xff08;1&#xff09; 一、树 1、树的概念与结构 &#xff08;1&#xff09;树是一种非线性的数据结构&#xff0c;由n(n>0)个有限结点组成一个具有层次关系的集合。 &#xff08;2&#xff09;树有一个特殊的结点&#xff0c;叫做根结点&#xff…

村落检测系统源码分享

村落检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …

Linux 查看磁盘 df -h 已经查看目录大小 du -sh ./*

使用df -h 命令可以查看磁盘信息 df -h 如下图所示: 获取当前目录 每个目录大小 du -sh ./* du -sh ./* 如果文件比较多 我们想获取文件大小最大的前10个 可以运行如下命令: du -ah | sort -rh | head -n 10 du -ah&#xff1a;显示当前目录及其子目录的所有文件和目录的…

条件编译代码记录

#include <iostream>// 基类模板 template<typename T> class Base { public:void func() {std::cout << "Base function" << std::endl;} };// 特化的子类 template<typename T> class Derived : public Base<T> { public:void…

【混淆矩阵】Confusion Matrix!定量评价的基础!如何计算全面、准确的定量指标去衡量模型分类的好坏??

【混淆矩阵】Confusion Matrix&#xff01;定量评价的基础&#xff01; 如何计算全面、准确的定量指标去衡量模型分类的好坏&#xff1f;&#xff1f; 文章目录 【混淆矩阵】Confusion Matrix&#xff01;定量评价的基础&#xff01;1. 混淆矩阵2.评价指标3.混淆矩阵及评价指标…

Mysql InnoDB 存储引擎简介

InnoDB 存储引擎是 Mysql 的默认存储引擎&#xff0c;它是由 Innobase Oy 公司开发的 Mysql 为什么默认使用 InnoDB 存储引擎 InnoDB 是一款兼顾高可靠性和高性能的通用存储引擎 在 Mysql 5.5 版本之前&#xff0c;默认是使用 MyISAM 存储引擎&#xff0c;在 5.5 及其之后版…