【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,可以自己试一下，我这里没有问题 -->