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

article/2024/5/21 21:47:14

左边箭头,右边文字可以自定义,但是不要太长,太长可以自己改 .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.ngui.cc/article/show-1927805.html

相关文章

智能驾驶规划控制理论学习02-基于搜索的路径规划方法

目录 一、路径搜索问题 二、图论基础 三、图搜索方法 1、广度优先搜索&#xff08;BFS&#xff09; bfs与dfs的区别 bfs的搜索过程 bfs的算法实现 2、迪杰斯特拉算法&#xff08;Dijkstra&#xff09; 核心思想 优先级队列 Dijkstra搜索过程 Dijkstra优缺点…

个人或者小团队选择C语言还是c++?

个人或者小团队选择C语言还是c? 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C语言的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff0…

可视化图表:水球图,展示百分比的神器。

Hi&#xff0c;我是贝格前端工场的老司机&#xff0c;本文分享可视化图表设计的水球图设计&#xff0c;欢迎老铁持续关注我们。 一、水球图及其作用 水球图是一种特殊的可视化图表&#xff0c;它主要用于展示百分比或比例的数据&#xff0c;并以水球的形式进行呈现。水球图的作…

【ArcPy】批量读取文件夹excel中XY并转为点shp

示例展示 代码 只读取excel中含有XY字段的文件&#xff0c;并将矢量命名为excel文件名称。 import os import pandas as pd import arcpy folder_path r"C:\Users\admin\Desktop\excelfile" extension"xlsx" files [file for file in os.listdir(folder…

面试官上来就让手撕HashMap的7种遍历方式,当场愣住,最后只写出了3种

HashMap的7种遍历方式 四大类遍历方式 其实在JDK1.8之前&#xff0c;遍历的方式远没有现在这样多&#xff0c;为了提高开发效率&#xff0c;JDK1.8开始引入了Stream流、Lambda 表达式等新特性&#xff0c;这让很多数据结构的遍历方式也丰富了起来。目前&#xff0c;常用的遍历方…

《PyTorch深度学习实践》第十一讲卷积神经网络进阶

一、 1、卷积核超参数选择困难&#xff0c;自动找到卷积的最佳组合。 2、1x1卷积核&#xff0c;不同通道的信息融合。使用1x1卷积核虽然参数量增加了&#xff0c;但是能够显著的降低计算量(operations) 3、Inception Moudel由4个分支组成&#xff0c;要分清哪些是在Init里定义…

【Leetcode每日一题】二分查找 - LCR 173. 点名(难度⭐)(24)

1. 题目解析 Leetcode题目链接&#xff1a;LCR 173. 点名 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 核心在于找到题目所给的连续数组中缺失的数字即可。 2.算法原理 在这个升序的数组中&#xff0c;我们发现&#xff1a; …

antvX6 - Vue自定义节点,并实现多种画布操作,拖拽、缩放、连线、双击、检索等等

一、 首先 antv x6 分为两个版本 低版本和高版本 我这里是使用的2.0版本 并且搭配了相关插件 例如&#xff1a;画布的图形变换、地图等 个人推荐 2.0版本&#xff0c;高版本配置多&#xff0c;可使用相关插件多&#xff0c;但是文档描述小&#xff0c;仍在更新&#xff0c; 低…

【Linux C | 网络编程】getaddrinfo 函数详解及C语言例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

优思学院|3步骤计算出Cpk|学习Minitab

在生产和质量管理中&#xff0c;准确了解和控制产品特性至关重要。一个关键的工具是Cpk值&#xff0c;它是衡量生产过程能力的重要指标。假设我们有一个产品特性的规格是5.080.02&#xff0c;通过收集和分析过程数据&#xff0c;我们可以计算出Cpk值&#xff0c;进而了解生产过…