小程序自定义导航

导航组件

 

    {{ setting }}

   

   

    {{ title.title }}

 

const app = getApp();

Component({

  /**

   * 组件的属性列表

   */

  properties: {

    setting: {

      type: String,

      value: ''

    },

    title: {

      type: Object,

      value: {

        color: '#fff',

        title: ''

      }

    },

    imgdata: {

      type: Object,

      value: {

        path: '',

        width: '',

        height: '',

        bgcolor: '#fff'

      }

    },

    back: {

      type: String,

      value: ''

    },

    home: {

      type: String,

      value: ''

    }

  },

  /**

   * 组件的初始数据

   */

  data: {

    statusBarHeight: app.globalData.statusBarHeight,

    imgwidth: 0,

    imgheight: 0

  },

  ready: function () {

    // console.log(this.data.imgdata);

  },

  /**

   * 组件的方法列表

   */

  methods: {

    imageLoad: function (e) {

      var _this = this;

      var $width = e.detail.width, //获取图片真实宽度

        $height = e.detail.height,

        ratio = $width / $height; //图片的真实宽高比例

      var viewWidth = 500, //设置图片显示宽度，

        viewHeight = 500 / ratio; //计算的高度值

      this.setData({

        imgwidth: viewWidth,

        imgheight: viewHeight

      });

    },

    setClick(e) {

      this.triggerEvent('setBtn', true);

    },

    callback() {

      wx.navigateBack({

        delta: 1

      });

    },

    callhome() {

      wx.switchTab({

        url: '/pages/home/index'

      });

    },

    // 背景图回调

    imgInfo: function (event) {

      // this.setData({

      //   imgWidth:event.detail.width,

      //   imgHeight:event.detail.height

      // })

    }

  }

});

/* components/my-component/index.wxss */

.topbar {

  width: 100%;

  height: 88rpx;

  /* background-color: pink; */

  position: fixed;

  top: 0;

  left: 0;

  z-index: 999;

}

.tb_body {

  height: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.row {

  font-size: 32rpx;

  font-family: PingFangSC, PingFangSC-Semibold;

  font-weight: 600;

  color: #ffffff;

  line-height: 50rpx;

}

.set {

  font-weight: 400;

  margin-left: 60rpx;

}

.title {

  position: absolute;

  width: 100%;

  /* text-align: center; */

  padding-left: 120rpx;

  z-index: -1;

}

.top-comend {

  width: 100%;

  height: 88rpx;

}

.bg_head {

  position: absolute;

  z-index: -1;

}

appjs

 // 获取高度

    wx.getSystemInfo({

      success: (res) => {

        this.globalData.height = res.statusBarHeight;

      }

    });

使用

 "usingComponents": {  "component-tag-name": "/components/my-component",  },

"navigationStyle": "custom",

  data: {

    imgdata: {

      path: '/images/profile/pfbg.png',

      width: '100%',

      height: '736rpx'

    }  },