微信小程序返回上一层及返回首页功能胶囊按钮组件自定义

1，在小程序组件中新建：

2，wxml代码：

//bgColor是顶部背景颜色

 

   

     

       

     

     

       

     

   

   

//由父组件传入的title参数

{{title}}

 

3，js：

const app = getApp()

Component({

  properties: {

    title: {

      type: String,

      value: 'Wechat'

    },

bgColor:{

type: String,

value: 'Wechat'

},

show:{

type: Boolean,

value:false

},

showlogo:{

type: Boolean,

value:false

},

    back: {

      type: Boolean,

      value: false

    },

    home: {

      type: Boolean,

      value: false

    }

  },

//在app.js中获取如下值

  data: {

    navBarHeight: app.globalData.navBarHeight,

    menuHeight: app.globalData.menuHeight,

menuRight:app.globalData.menuRight,

menuBottom:app.globalData.menuBottom,

    nginxUrl: app.globalData.nginxUrl,

  },

  methods: {

    backHome: function () {

      wx.reLaunch({

        url: '/pages/home/home',

      })

    },

    back: function () {

      wx.navigateBack({

        delta: 1

      })

    }

  }

})

4,wxss:

.navbar {

  width: 100vw;

  position: fixed;

top: 0;

  z-index: 4;

background-color: #a0d8fd;

}

.title-container {

  display: flex;

  align-items: center;

position: absolute;

box-sizing: border-box;

padding-right: 200rpx;

width: 100%;

}

.pd0{

padding: 0;

}

.capsule {

width: 150rpx;

height: 100%;

  display: flex;

  align-items: center;

background-color: rgba(0,0,0,0.15);

}

.capsule > view {

  width: 49%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.capsule view image{

width: 40rpx;

height: 40rpx;

}

.capsule > view.shu{

width: 2rpx;

height: 40rpx;

background-color: rgba(255,255,255,0.4);

}

.title {

  color: #333;

  font-size: 36rpx;

  text-align: center;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

flex: 1;

text-align: center;

}

.title image{

width: 40rpx;

height: 40rpx;

vertical-align: middle;

margin-right: 10rpx;

}

5，json:

{

  "component": true

}

6,app.js的onShow()中获取胶囊高度位置等：

onShow(){

const systemInfo = wx.getSystemInfoSync();

        // 胶囊按钮位置信息

        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

        // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度

        this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;

        this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;

        this.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;

        this.globalData.menuHeight = menuButtonInfo.height;

}