123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- //获取应用实例
- const app = getApp()
- Component({
- options: {
- multipleSlots: true
- },
- properties: {
- title: { //导航栏标题
- type: String,
- value: '诺信云'
- },
- color: { //标题字体颜色
- type: String,
- value: '#fff'
- },
- transparent: { //是否透明
- type: Boolean,
- value: false
- },
- background: { //背景色
- type: String,
- value: '#007dff'
- },
- border: { //导航栏下边框样式
- type: String,
- value: 'border-bottom:none'
- },
- cusPath: { //用户自定义返回操作
- type: Boolean,
- value: false
- },
- backPath: { //左侧返回按钮点击后的返回路径(没有的话默认返回上一页)
- type: Boolean,
- value: false
- },
- backImage: { //左侧箭头图片
- type: String,
- value: '../../images/icon-back.svg'
- },
- loading: { //是否显示导航栏loading
- type: Boolean,
- value: false
- },
- dbclickBackTop: { //双击标题返回顶部功能是否开启
- type: Boolean,
- value: false
- },
- leftType: { //标题显示方式normal(安卓居左,ios居右),android(无论ios还是安卓,全部居左),ios(无论安卓还是ios,全部居中)
- type: String,
- value: 'normal'
- }
- },
- data: {
- showBack: false, //是否显示返回按钮
- },
- attached: function () {
- let systemInfo = app.globalData.systemInfo
- if (systemInfo) {
- this.setNavbar(systemInfo)
- } else {
- wx.getSystemInfo({
- success: res => {
- this.setNavbar(res)
- }
- })
- }
- //是否显示返回按钮(如果是第一页,就不显示,如果不是第一页,就显示)
- let pages = getCurrentPages()
- if (pages.length > 1) {
- this.setData({
- showBack: true
- })
- }
- },
- methods: {
- //点击返回按钮
- goBack() {
- if (this.data.cusPath === false) {
- if (this.data.backPath) {
- wx.switchTab({
- url: this.data.backPath
- })
- } else {
- wx.navigateBack()
- }
- } else {
- this.triggerEvent('back')
- }
- },
- //双击返回顶部
- doubleClick(e) {
- if (!this.data.dbclickBackTop) {
- return
- }
- if (this.timeStamp && (e.timeStamp - this.timeStamp < 300)) {
- this.timeStamp = 0
- wx.pageScrollTo({
- scrollTop: 0,
- duration: 300
- })
- } else {
- this.timeStamp = e.timeStamp
- }
- },
- //设置自定义导航信息
- setNavbar(systemInfo) {
- let isSupport = !!wx.getMenuButtonBoundingClientRect //是否支持获取胶囊按钮信息
- let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null //获取胶囊按钮信息
- let ios = !!(systemInfo.system.toLowerCase().search('ios') + 1) //是否是ios系统
- let topBarHeight = ios ? (44 + statusBarHeight) : (48 + statusBarHeight) //获取导航栏高度
- let statusBarHeight = systemInfo.statusBarHeight //获取状态栏高度
- let leftStyle
- if (ios) {
- if (this.data.leftType !== 'android') {
- leftStyle = isSupport ? 'width:' + (systemInfo.windowWidth - rect.left) + 'px' : ''
- } else {
- leftStyle = 'margin-right:18px;'
- }
- } else {
- if (this.data.leftType !== 'ios') {
- leftStyle = 'margin-right:18px;'
- } else {
- leftStyle = isSupport ? 'width:' + (systemInfo.windowWidth - rect.left) + 'px' : ''
- }
- }
- this.setData({
- ios,
- topBarHeight,
- statusBarHeight,
- innerWidth: isSupport ? 'width:' + rect.left + 'px' : '',
- innerPaddingRight: isSupport ? 'padding-right:' + (systemInfo.windowWidth - rect.left) + 'px' : '',
- leftStyle
- })
- let eventDetail = {
- topBarHeight,
- statusBarHeight
- }
- this.triggerEvent('getNavbarInfo', eventDetail)
- }
- }
- })
|