uniapp开发微信小程序--自定义顶部导航栏

一、实现效果:

在这里插入图片描述

二、代码实现:

1.在pages.json文件中,单页面定义导航栏,添加以下代码:

"navigationStyle": "custom" //自定义导航栏

如图所示:
在这里插入图片描述

2.在components文件夹下,封装一个组件navBar.vue

<template><view class="prohibition"><view class="demo" :style="[{background},{color},{height},{paddingTop}]"><!-- 左侧 --><view class="returnback" @click="returnBack"><image src="../static/images/more_user2@2x.png" mode=""></image></view><!-- 中间标题文字 --><view class="title">{{title}}</view></view></view>
</template><script>export default {name: 'navbarny',data() {return {height: 0,paddingTop: 0,index: '',}},// props: ["title", "back"],props: {//接收的值// topArray: [],// index: '',title: { // 标题文字(默认为空)type: String,default: ''},color: { // 标题和返回按钮颜色(默认白色)type: String,default: '#333333'},//建议使用background  因为使用backgroundColor,会导致不识别渐变颜色background: { // 背景颜色(不传值默认透明)type: String,default: 'transparent'},back: { // 是否显示返回按钮(不传值默认不显示)type: Boolean,default: false},},mounted(){// this.cityname = uni.getStorageSync('citynames')// console.log('shi',this.cityname)},created() {const demo = uni.getMenuButtonBoundingClientRect()this.height = demo.height + "px"this.paddingTop = demo.top + "px"},methods: {bindPickerChange: function(e) {console.log('picker发送选择改变,携带值为', e.detail.value)this.index = e.detail.value},areaFun(){uni.navigateTo({url:'/pages/SelectArea/area'})},returnBack(){uni.navigateBack()}}}
</script>
<style lang="less">.demo {position: relative; //注意,建议使用相对定位,因为固定定位会脱离文档流,然后你还要去设置marginTop值// position: fixed;width: 100%;display: flex;align-items: center;justify-content: center;z-index: 100;padding-bottom: 10rpx;height: 70rpx !important;.returnback{position: absolute;bottom: 10rpx;left: 30rpx;height:60rpx; transform: rotate(-180deg);display: flex;align-items: center;image{width: 19rpx;height: 31rpx;}}.left {position: absolute;max-width: 280rpx;height: 60rpx;line-height: 44rpx;top: 0;bottom: 0;left: 70rpx;margin: auto;font-size: 24rpx;font-family: Microsoft YaHei UI;font-weight: 400;color: #fff;display: flex;align-items: center;image {width: 24rpx;height: 24rpx;margin-left: 7rpx;}.uni-input {max-width: 220rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}.title {font-size: 32rpx;font-weight: bold;font-stretch: normal;letter-spacing: r1px;color: #33333;}}
</style>

3.在页面中引用使用组件:(注:写在页面的最上面)

<navbar class="header" :title="title"></navbar><script>import navbar from '@/components/navBar.vue'export default {components: {navbar},data() {return {title: '首页',}},}
</script><style>.header{width: 100%;height: auto;position: fixed;top: 0;left: 0;height: 150rpx;background-image: url('../../static/images/bg@2x_01.png');background-size: 100% 100%;background-repeat: no-repeat;background-position: 0 0;z-index: 9999;}
</style>

完成~

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

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

相关文章

使用多数据源dynamic-datasource-spring-boot-starter遇到的问题记录

记录使用多数据源dynamic-datasource-spring-boot-starter遇到的问题&#xff1a; 1、工程启动失败 缺少clickhouse连接驱动&#xff0c;引入对应的maven依赖 <!--ck连接驱动--><dependency><groupId>ru.yandex.clickhouse</groupId><artifactId>…

Kylin v10基于cephadm工具离线部署ceph分布式存储

1. 环境&#xff1a; ceph&#xff1a;octopus OS&#xff1a;Kylin-Server-V10_U1-Release-Build02-20210824-GFB-x86_64、CentOS Linux release 7.9.2009 2. ceph和cephadm 2.1 ceph简介 Ceph可用于向云平台提供对象存储、块设备服务和文件系统。所有Ceph存储集群部署都从…

制作crate并发布到Crates.io

准备 发布 crate 时, 一旦发布无法修改,无法覆盖, 因此要注意邮箱等一些个人信息 访问crates.io 的 帐号设定页面[1],生成Token 并在命令行 执行 cargo login your token 此命令将告诉 Cargo 你的 API 令牌, 并将其存储在本地 ~/.cargo/credentials crates.io 上crate的名字, 会…

生成测试报告就万事大吉了吗?NO,升职加薪就差这一步啦!- 04(非常详细,非常实用)

简介 上一篇生成测试报告&#xff0c;小伙伴们和童鞋们就又问道&#xff0c;测试报告已经生成了&#xff0c;怎么发送给相关的负责人了&#xff1f;小伙伴们和童鞋们不要着急&#xff0c;慢慢给你道来&#xff0c;心急吃不了热豆腐哈。这些小伙伴们的表现还是不错的&#xff0c…

安装nvm之后,node -v 提示‘node‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件

1. 检查有没有执行这个命令&#xff1a;nvm use [nodejs version name] 2. 检查nvm安装位置同级&#xff0c;有没有nodejs文件夹&#xff0c;是一个快捷键&#xff01;如果有一个其他的nodejs&#xff0c;把它删掉&#xff0c;然后到cmd中&#xff0c;重新nvm install一下&…

【计算机网络】应用层协议 -- 安全的HTTPS协议

文章目录 1. 认识HTTPS2. 使用HTTPS加密的必要性3. 常见的加密方式3.1 对称加密3.2 非对称加密3.3 非对称加密对称加密 4. 引入CA证书4.1 CA认证4.2 数据签名4.3 非对称机密对称加密证书认证4.4 常见问题 5. 总结 1. 认识HTTPS HTTPS全称为 Hyper Text Tranfer Protocol over …

API教程:轻松上手HTTP代理服务!

作为HTTP代理产品供应商&#xff0c;我们为您带来一份详细的教程&#xff0c;帮助您轻松上手使用API&#xff0c;并充分利用HTTP代理服务。无论您是开发人员、网络管理员还是普通用户&#xff0c;本教程将为您提供操作指南和代码模板&#xff0c;确保您能够顺利使用API并享受HT…

【深度学习】Inst-Inpaint: Instructing to Remove Objects with Diffusion Models,指令式图像修复

论文&#xff1a;https://arxiv.org/abs/2304.03246 code:http://instinpaint.abyildirim.com/ 文章目录 AbstractIntroductionRelated WorkDataset GenerationMethodPS Abstract 图像修复任务是指从图像中擦除不需要的像素&#xff0c;并以语义一致且逼真的方式填充它们。传统…

SQL项目实战:银行客户分析

大家好&#xff0c;本文将与大家分享一个SQL项目&#xff0c;即根据从数据集收集到的信息分析银行客户流失的可能性。这些洞察来自个人信息&#xff0c;如年龄、性别、收入和人口统计信息、银行卡类型、产品、客户信用评分以及客户在银行的服务时间长短等。对于银行而言&#x…

使用DeferredResult来设计异步接口

文章目录 DeferredResult 介绍思路Demo搭建1.定义一个抽象的请求体2.定义一个接口返回体3.定义一个接口请求体继承抽象类AsynTaskBaseRequest<T<T>>4.定义seveice类&#xff0c;并声明一个异步方法&#xff08;Async注解&#xff09;5.定义一个返回DeferredResult的…

Chrome浏览器中的vue插件devtools的下载方式(使用Chrome应用商店/科学上网情况下)

目录 devtools对前端来说的好处——开发预览、远程调试、性能调优、Bug跟踪、断点调试等 下载步骤&#xff1a; 测试阶段&#xff1a; 最近做项目要使用devtools这个vue插件。 devtools对前端来说的好处——开发预览、远程调试、性能调优、Bug跟踪、断点调试等 下载步骤…

【云原生】Serverless 技术架构分析

一、什么是Serverless? 1、Serverless技术简介 ​ Serverless&#xff08;无服务器架构&#xff09;指的是由开发者实现的服务端逻辑运行在无状态的计算容器中&#xff0c;它由事件触发&#xff0c; 完全被第三方管理&#xff0c;其业务层面的状态则被开发者使用的数据库和存…

基于小程序+spring boot流浪动物救助系统-计算机毕设 附源码12783

小程序spring boot流浪动物救助系统 摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;流浪动物救助系统被用…

C# 中使用ValueTask优化异步方法

概要 我们在开发过程中&#xff0c;经常使用async的异步方法&#xff0c;但是有些时候&#xff0c;异步的方法中&#xff0c;可能包含一些同步的处理。本文主要介绍通过ValueTask这个struct&#xff0c;优化异步处理的方法性能。 代码及实现 有些时候我们会缓存一些数据在内…

Vue+Element Plus 初始化

1. 初始化 Vue 项目 创建vue3 项目 vue create k8s-platform-fe 2. 引入 Element Plus 安装 element-plus 首先去安装这些依赖包&#xff0c;安装好了将其引入&#xff0c;引入的方式有全局引用和局部引入。其实和组件是一样的&#xff0c;局部引入哪里引入哪里使用。…

接口测试和功能测试的区别

我们分成两个部分来讲&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xf…

mac安装nvm

如果安装过node&#xff0c;须得卸载 sudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*sudo rm -rf /usr/local/include/node /Users/$USER/.npmsudo rm /usr/local/bin/nodesudo rm /usr/local/share/m…

Wireshark抓包分析TCP协议:三次握手和四次挥手

01、前言 面试中我们经常会被问到TCP协议的三次握手和四次挥手的过程&#xff0c;为什么总喜欢问这个问题呢&#xff1f; 其实我们平时使用的很多协议都是应用层协议&#xff0c;比如HTTP协议&#xff0c;https协议&#xff0c;DNS协议&#xff0c;FTP协议等&#xff1b;而应…

Google OAuth 2 authorization - Error: redirect_uri_mismatch 400

出现这个问题&#xff0c;一般是因为google授权origin地址和重定向redirect_uri地址没有匹配上。 请仔细检查重定向地址的url中origin部分和授权origin部分是否能够匹配&#xff1a;

美容店预约小程序制作教程详解

现在&#xff0c;制作一个专属于美容店的预约小程序不再需要编程经验&#xff0c;通过乔拓云网提供的后台管理系统&#xff0c;你可以轻松地完成整个制作过程。下面&#xff0c;我将为你详细介绍如何DIY一个美容店预约小程序。 首先&#xff0c;登录乔拓云网的后台管理系统&…