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

  
  

    
    
     
     
    
    
    
    
     
     
      
      ,{
     
     
    
    

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

    
    
     
     
    
    
    
    
     
                 
      
      "style" :                                     
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
                  {
     
     
    
    

    
    
     
     
    
    
    
    
     
                     
      
      "navigationBarTitleText": 
      
      "",
     
     
    
    

    
    
     
     
    
    
    
    
     
                     
      
      "enablePullDownRefresh": 
      
      false
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
                  }
     
     
    
    

    
    
     
     
    
    
    
    
     
                 
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
              }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
              ,{
     
     
    
    

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

    
    
     
     
    
    
    
    
     
                 
      
      "style" :                                     
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
                  {
     
     
    
    

    
    
     
     
    
    
    
    
     
                     
      
      "navigationBarTitleText": 
      
      "",
     
     
    
    

    
    
     
     
    
    
    
    
     
                     
      
      "enablePullDownRefresh": 
      
      false,
     
     
    
    

    
    
     
     
    
    
    
    
     
      
     
     
    
    

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

    
    
     
     
    
    
    
    
     
     				
      
      "navigationStyle": 
      
      "custom"
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
                  }
     
     
    
    

组件：backPages.vue

  
  

    
    
     
     
    
    
    
    
     
     
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     		
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     		
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     		
      
       
     
     
    
    

    
    
     
     
    
    
    
    
     
     			
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     			
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     			
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     				
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      					{{backtext}}
     
     
    
    

    
    
     
     
    
    
    
    
     
     				
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     			
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     		
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      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 
      
      // 返回的页面数
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      				})
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      			},
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      		}
     
     
    
    

    
    
     
     
    
    
    
    
     
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      	}
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      .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;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      	}