【uniapp】小程序自定义一个通用的返回按钮组件

左边箭头,右边文字可以自定义,但是不要太长,太长可以自己改 .back的width值,改宽一点。

用这个组件的时候首先要在pages.json里把导航栏变成自定义的:

  1. ,{
  2. "path" : "pages/test/test",
  3. "style" :
  4. {
  5. "navigationBarTitleText": "",
  6. "enablePullDownRefresh": false
  7. }
  8. }
  9. ,{
  10. "path" : "pages/shop/shop",
  11. "style" :
  12. {
  13. "navigationBarTitleText": "",
  14. "enablePullDownRefresh": false,
  15. //这个-->自定义导航栏
  16. "navigationStyle": "custom"
  17. }

组件:backPages.vue

  1. <template>
  2. <view class="big_out">
  3. <!-- 左上角返回按钮 -->
  4. <!-- 这里为什么要加4px,是因为这个左箭头<的高度为16rpx需要下降一半,就是8rpx=4px,可以自己试一下,我这里没有问题 -->
  5. <view class="back" :style="'margin-top:'+ (titletop+4)+'px'" @click="back_page">
  6. <view class="back_img">
  7. </view>
  8. <view class="back_text">
  9. <slot>
  10. {{backtext}}
  11. </slot>
  12. </view>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. name: "backPages",
  19. props: {
  20. backtext: String,
  21. },
  22. data() {
  23. return {
  24. titleheight: 0,
  25. titletop: 0
  26. };
  27. },
  28. //这里原来使用的onLoad一直有bug(不重新进入页面就会错位),
  29. // 后来使用onShow 更改于2022/09/30 以后再修改
  30. onShow() {
  31. //加载时调用 getHeight
  32. this.getHeight();
  33. },
  34. methods: {
  35. //利用胶囊按钮定位宽高
  36. getHeight() {
  37. let res = uni.getMenuButtonBoundingClientRect();
  38. this.titletop = res.top;
  39. this.titleheight = res.height
  40. },
  41. //直接返回上一级
  42. back_page() {
  43. uni.navigateBack({
  44. delta: 1 // 返回的页面数
  45. })
  46. },
  47. }
  48. }
  49. </script>
  50. <style scoped>
  51. .big_out {
  52. position: fixed;
  53. z-index: 999;
  54. /* background-color: red; */
  55. }
  56. .back {
  57. position: absolute;
  58. height: 50rpx;
  59. width: 120rpx;
  60. }
  61. .back_img {
  62. /* 用border值来控制箭头粗细 */
  63. border: 3px solid black;
  64. /* 上、右、下、左 四个边框的宽度 */
  65. border-width: 0px 2px 2px 0px;
  66. display: inline-block;
  67. /* padding值控制箭头大小 */
  68. padding: 5px;
  69. transform: rotate(135deg);
  70. -webkit-transform: rotate(135deg);
  71. margin-left: 30rpx;
  72. }
  73. .back_text {
  74. float: right;
  75. }
  76. </style>

使用的时候需要传按钮名:backtext = ‘返回或者自定义’

需要import引入组件并注册components才行,示例代码:

  1. <template>
  2. <view>
  3. <backPages backtext='返回' ></backPages>
  4. </view>
  5. </template>
  6. <script>
  7. import backPages from "@/components/backPages.vue"
  8. export default {
  9. components:{
  10. backPages
  11. },
  12. data() {
  13. return {
  14. }
  15. },
  16. methods: {
  17. }
  18. }
  19. </script>
  20. <style>
  21. </style>

组件默认回到上一层级,自定义请更改组价的back_page方法。

转:https://blog.csdn.net/ONLYSRY/article/details/126178045

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

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

相关文章

C#常识篇(三)

内置类型字节大小 以下是 C# 中常见内置数据类型的字节大小&#xff1a; bool&#xff08;布尔&#xff09;类型&#xff1a;通常为 4 或者 8 字节。在不同平台上可能会有所不同。 byte&#xff08;无符号字节&#xff09;类型&#xff1a;始终为 1 字节。 sbyte&#xff08;有…

Goose:Golang中的数据库迁移工具

Goose&#xff1a;Golang中的数据库迁移工具 在Golang开发中&#xff0c;数据库迁移是一个常见的任务&#xff0c;用于管理数据库模式的演化和版本控制。Goose是一个轻量级的、易于使用的数据库迁移工具&#xff0c;专为Golang开发者设计。本文将介绍Goose的基本概念、用法和优…

智能驾驶规划控制理论学习01-自动驾驶系统介绍、规划控制模块介绍

目录 一、自动驾驶系统概述 二、规划控制模块介绍 1、规划控制架构 2、规划控制目标 3、Cartesian和Frenet坐标系 4、Frenet坐标系概览 5、解耦式规划和联合式规划 一、自动驾驶系统概述 目前被国内外广为接受的自动驾驶级别划分标准是 SAE&#xff…

Nano 33 BLE Sense Rev2学习第二节——手机蓝牙接收数据

Nano 33 BLE Sense Rev2需要下载的程序 #include <ArduinoBLE.h> #include "Arduino_BMI270_BMM150.h"float x, y, z; int degreesX 0; int degreesY 0;BLEService ledService("19B10010-E8F2-537E-4F6C-D104768A1214"); // create service// cre…

2024年两会-区块链方向-新质生产力-先进制造业集群

区块链寒冬还未散去&#xff0c;但区块链引发的信任革命&#xff0c;对生产关系的变革&#xff0c;对数字金融产生的广泛影响&#xff0c;对货币金融体系的完全重构&#xff0c;对数据融合和隐私安全带来的巨大冲击才刚刚开始&#xff0c;没有不好的技术&#xff0c;只有不好的…

XSS漏洞--概念、类型、实战--分析与详解[结合靶场pikachu]

目录 一、XSS概念简述 1、XSS简介&#xff1a; 2、XSS基本原理&#xff1a; 3、XSS攻击流程&#xff1a; 4、XSS漏洞危害&#xff1a; 二、XSS类型&#xff1a; 1、反射型XSS&#xff1a; 2、存储型XSS&#xff1a; 3、DOM型XSS&#xff1a; 三、靶场漏洞复现(pikach…

LVS四层负载均衡集群

简介 LVS&#xff08;Linux Virtual Server&#xff09;即Linux虚拟服务器&#xff0c;是由章文嵩博士主导的开源负载均衡项目&#xff0c;目前LVS已经被集成到Linux内核模块中。该项目在Linux内核中实现了基于IP的数据请求负载均衡调度方案&#xff0c;终端互联网用户从外部访…

基于 Guava 的 RateLimiter 实现预热功能

基于 Guava 的 RateLimiter 实现预热功能 Guava 的 RateLimiter 类提供了一种限流的机制&#xff0c;它可以控制在给定的时间间隔内允许的操作速率。虽然 Guava 的 RateLimiter 类本身并没有提供预热模型的功能&#xff0c;但是你可以通过自定义的方式实现一个简单的预热模型。…

html地铁跑酷

下面是一个简单的HTML代码来展示一个地铁跑酷游戏&#xff1a; <!DOCTYPE html> <html> <head><title>地铁跑酷</title><style>#player {position: absolute;top: 0;left: 0;width: 50px;height: 50px;background-color: red;}</style…

C语言 通讯录项目动态版本 容量可增加

项目在clion通过简单测试 代码在三个文件里写成 ①main.c 项目大框架 #include"game.h"//显示菜单 void Menu(){printf("****1.添加用户 2.删除用户****\n");printf("****3.查找用户 4.修改用户****\n");printf("****5.显示用户 6.…

diffusion model (扩散模型)原理

扩散模型分为正向过程和反向过程。 正向过程为一点点在图片上添加噪声的过程&#xff0c;反向过程为去噪声的过程。 图片的生成就是反向过程&#xff0c;给一张高斯噪声图片&#xff0c;逐步去噪生成图片。 扩散模型和VAE的区别&#xff0c; VAE是一步到位的&#xff08;通过…

一个基于差异同步数据库结构的工具 - Skeema

本文是 GO 三方库推荐的第 5 篇&#xff0c;继续介绍数据库 schema 同步工具&#xff0c;我前面已经写了两篇这个主题的文章。系列查看&#xff1a;Golang 三方库。 今天&#xff0c;推荐是的一个基于差异实现数据库 schema 迁移的工具库 - skeema&#xff0c;同样由 Go 实现。…

数字孪生10个技术栈:数据采集的八种方式

大家好&#xff0c;我是贝格前端工场&#xff0c;上期讲了数字孪生10个技术栈&#xff08;总括&#xff09;:概念扫盲和总体介绍&#xff0c;获得了大家的热捧&#xff0c;本期继续分享技术栈&#xff0c;大家如有数字孪生或者数据可视化的需求&#xff0c;可以联络我们。 一、…

迁移数据库

如果您需要快速迁移数据库到另一台服务器上&#xff0c;并且考虑到大型数据库的情况&#xff0c;以下是一些建议&#xff1a; 使用 mysqldump 导出并通过管道传输&#xff1a; 在导出时通过管道直接传输数据到新服务器&#xff0c;可以避免在中间产生大型的备份文件。这可以通过…

【好书推荐-第九期】Sora核心技术相关书籍《扩散模型:从原理到实战》与《GPT 图解:大模型是怎样构建的》:Sora的两大核心技术,都藏在这两本书里!

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公众号&#xff1a;洲与AI。 &#x1f388; 本文专栏&#xff1a;本文收录…

微信小程序开发常用的布局

在微信小程序开发中&#xff0c;常用的布局主要包括以下几种&#xff1a; Flex 布局&#xff1a;Flex 布局是一种弹性盒子布局&#xff0c;通过设置容器的属性来实现灵活的布局方式。它可以在水平或垂直方向上对子元素进行对齐、排列和分布。Flex 布局非常适用于创建响应式布局…

图片切换特效

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>05 图片切换</title><style type"text/css">*{padding: 0;margin: 0;}#box{border: 1px solid #ccc;width: 430px;height: 70px…

进程间通信---管道题目练习

实现AB进程对话。 A进程发送一句话后&#xff0c;B进程接收到打印。然后B进程发送一句话&#xff0c;A进程接收后打印 重复上述步骤。直到AB接收或者发送完quit后&#xff0c;结束AB进程 A进程 #include <stdio.h> #include <sys/types.h> #include <sys/stat.…

解决DBeaver执行脚本报错No active connection

解决DBeaver执行脚本报错No active connection 1、报错问腿 2、问题解决 2.1、右键点击该数据库&#xff0c;选择SQL编辑器&#xff0c;选择新建SQL编辑器&#xff0c;然后将sql语句复制过去。 或者左击选中数据库后直接使用快捷键 Ctrl] 2.2、在Project-General中找到Scr…

k8s运维问题整理

1.宕机或异常重启导致etcd启动失败 服务器非正常关机&#xff08;意外掉电、强制拔电&#xff09;后 etcd 数据损坏。 查看apiserver日志发现出现报错Error while dialing dial tcp 127.0.0.1:2379: connect: connection refused&#xff0c;2379是etcd的端口&#xff0c;那么a…