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

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

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

  
  

    
    

     
     

    
    
    
    

     
     

      
      ,{
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      "path" : 
      
      "pages/test/test",
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      "style" :                                                                                    
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
                  {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
                
      
      "navigationBarTitleText": 
      
      "",
     
     
    
    

    
    

     
     

    
    
    
    

     
     
                
      
      "enablePullDownRefresh": 
      
      false
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
                  }
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
              }
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
              ,{
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      "path" : 
      
      "pages/shop/shop",
     
     
    
    

    
    

     
     

    
    
    
    

     
     
            
      
      "style" :                                                                                    
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
                  {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
                
      
      "navigationBarTitleText": 
      
      "",
     
     
    
    

    
    

     
     

    
    
    
    

     
     
                
      
      "enablePullDownRefresh": 
      
      false,
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     
                
      
      //这个-->自定义导航栏
     
     
    
    

    
    

     
     

    
    
    
    

     
     
				
      
      "navigationStyle": 
      
      "custom"
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
                  }
     
     
    
    
  
  

   
   
  
  
  
  

组件：backPages.vue

  
  

    
    

     
     

    
    
    
    

     
     

      
      <template>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      <view class="big_out">
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      <!-- 左上角返回按钮 -->
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      <!-- 这里为什么要加4px，是因为这个左箭头<的高度为16rpx需要下降一半，就是8rpx=4px,可以自己试一下，我这里没有问题 -->
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      <view class="back"  :style="'margin-top:'+ (titletop+4)+'px'"  @click="back_page"> 
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      <view class="back_img">
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      </view>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      <view class="back_text">
     
     
    
    

    
    

     
     

    
    
    
    

     
     
				
      
      <slot>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      					{{backtext}}
     
     
    
    

    
    

     
     

    
    
    
    

     
     
				
      
      </slot>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      </view>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      </view>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      </view>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </template>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      <script>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      export 
      
      default {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      name: 
      
      "backPages",
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      props: {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      backtext: 
      
      String,
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      		},
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      data(
      
      ) {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      return {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
				
      
      titleheight: 
      
      0,
     
     
    
    

    
    

     
     

    
    
    
    

     
     
				
      
      titletop: 
      
      0
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      			};
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      		},
     
     
    
    

    
    

     
     

    
    
    
    

     
     
        
      
      //这里原来使用的onLoad一直有bug（不重新进入页面就会错位），
     
     
    
    

    
    

     
     

    
    
    
    

     
     
        
      
      // 后来使用onShow  更改于2022/09/30  以后再修改
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      onShow(
      
      ) {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      //加载时调用 getHeight
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      this.
      
      getHeight();
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      		},
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      methods: {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      //利用胶囊按钮定位宽高
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      getHeight(
      
      ) {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
				
      
      let res = uni.
      
      getMenuButtonBoundingClientRect();
     
     
    
    

    
    

     
     

    
    
    
    

     
     
				
      
      this.
      
      titletop = res.
      
      top;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
				
      
      this.
      
      titleheight = res.
      
      height
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      			},
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      //直接返回上一级
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      back_page(
      
      ) {
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      				uni.
      
      navigateBack({
     
     
    
    

    
    

     
     

    
    
    
    

     
     
					
      
      delta: 
      
      1 
      
      // 返回的页面数
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      				})
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      			},
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      		}
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      	}
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </script>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      <style scoped>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      .big_out {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      position: fixed;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	    
      
      z-index: 
      
      999;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      /* background-color: red; */
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      	}
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      .back {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      position: absolute;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      height: 
      
      50rpx;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      width: 
      
      120rpx;
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      	}
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      .back_img {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      /* 用border值来控制箭头粗细 */
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      border: 
      
      3px solid black;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      /* 上、右、下、左  四个边框的宽度 */
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      border-width: 
      
      0px 
      
      2px 
      
      2px 
      
      0px;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      display: inline-block;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      /* padding值控制箭头大小 */
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      padding: 
      
      5px;
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      transform: 
      
      rotate(
      
      135deg);
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      		-webkit-
      
      transform: 
      
      rotate(
      
      135deg);
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      margin-left: 
      
      30rpx;
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      	}
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      .back_text {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      float: right;
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      	}
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </style>
     
     
    
    
  
  

   
   
  
  
  
  

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

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

  
  

    
    

     
     

    
    
    
    

     
     

      
      <template>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      <view>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      <backPages backtext='返回' >
      
      </backPages>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      </view>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </template>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      <script>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      import backPages 
      
      from 
      
      "@/components/backPages.vue"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      export 
      
      default {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      components:{
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      			backPages
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      		},
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      data(
      
      ) {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
      
      return {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
				
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      			}
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      		},
     
     
    
    

    
    

     
     

    
    
    
    

     
     
		
      
      methods: {
     
     
    
    

    
    

     
     

    
    
    
    

     
     
			
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      		}
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      	}
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </script>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      <style>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </style>
     
     
    
    
  
  

   
   
  
  
  
  

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

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