支付宝小程序自定义可切换navbar及处理无法点击bug

实现效果

(ide截图 真机上不会有白色直线)

实现步骤

1. 获取手机信息-navbar高度

// 页面： app.js onLaunch
 //获取导航栏高度
    my.getSystemInfo({
      success: (result) => {
        let statusBarHeight = result.statusBarHeight;
        let titleBarHeight = result.titleBarHeight;
        let navBarHeight = statusBarHeight + titleBarHeight	
        // 将相关信息保存至本地 （或者可以存在globalData中）
		my.setStorageSync({ key: 'systemInfo', data: { result } });
        my.setStorageSync({ key: 'statusBarHeight', data: { statusBarHeight } });
        my.setStorageSync({ key: 'titleBarHeight', data: { titleBarHeight } });
        my.setStorageSync({ key: 'navBarHeight', data: { navBarHeight } });
      },
      fail: () => {
       
      }
    });

2. 对应页面设置及开发

// 对应页面 json文件中设置
	{
  "allowsBounceVertical": "NO",
  "titleBarColor": "#222",
  "titlePenetrate": "YES", // *******这个属性很重要***** 
  "transparentTitle": "always",
  "usingComponents": {
    "nav-bar": "/components/public/navBar/navBar" // 引入对应nav-bar组件
  }
}

 <!-- 对应页面axml引入自定义导航栏组件 -->
 <nav-bar navbarData="{{navbarData}}" onChangeComment="onChangeComment"></nav-bar>

// 对应页面js文件
// data中设置navbarData数据
data:  {
	navbarData: {
      background: '#ffffff',
      title: '收到的评论',
      titleColor: '#222222',
      isTitleFilter: true,
      titleFilter: [
        {
        title: '收到的评论',
        id: 0
      },
      {
        title: '发出的评论',
        id: 1
      }
    ]
    },
}

// 接收子组件传递过来的信息onChangeComment
  onChangeComment(id) {
    this.setData({
      // 因为是切换功能 所以这里清空对应信息
    })
    console.log(id)
    if(id==0) {
    	// 这里调用切换后的对应请求
      this.getReceiveComment()
    }else {
    	// 这里调用切换后的对应请求
      this.getMyComment()
    }
  },

3. nav-bar组件开发

// 新建component nav-bar axml页面设置样式
<view class="nav-header" style="height:{{navBarHeight}}px;background:{{navbarData.background}};">
  <view class="nav-status-view" style="height:{{statusBarHeight}}px;">
  </view>
  <view class="nav-titlebar-view" style="height:{{titleBarHeight}}px;" >
    <view class="nav-back-view" style="width:{{navbarData.isHome?'16px':'80rpx'}}">
    </view>
    <!-- 评论页面顶部筛选 -->
    <view a:if="{{navbarData.isTitleFilter}}" class="nav-title-filter">
      <popover
        position="bottom"
        show="{{showChosePopper}}"
        showMask="{{true}}"
        onMaskClick="onMaskClick"
        fixMaskFull="{{true}}"
      >
        <view class="filter-title" onTap="onShowPopoverTap">
          <text>{{filterTitleText}}</text>
          <image mode="scaleToFill" src="/images/mineImage/unfold_comment.png"  />
        </view>
        <view slot="items">
          <block a:for="{{navbarData.titleFilter}}" a:for-item="item">
            <popover-item onItemClick="itemTap" class="popper-comment-item {{activePopperIndex==item.id?'active': ''}}" data-id="{{item.id}}">
              <text>{{item.title}}</text>
            </popover-item>
          </block>
        </view>
      </popover>
    </view>
  </view>
</view>

// 组件js页面 获取navbar信息
Component({
  mixins: [],
  data: {
    statusBarHeight: my.getSystemInfoSync().statusBarHeight,
    titleBarHeight: my.getSystemInfoSync().titleBarHeight,
    navBarHeight: my.getSystemInfoSync().statusBarHeight + my.getSystemInfoSync().titleBarHeight,
    filterTitleText:'',
    showChosePopper: false,
    activePopperIndex: 0
  },
  props: {
    navbarData: {
      background: '',          //背景颜色
      title: '',               //标题
      titleColor: '#222222',   //标题颜色
      titleBackground: '',     //字体背景颜色
      type: 1,                 //type:1 默认样式 type:2 胶囊样式 type:99 自定义
      isHome: false,
      isTab: false,
      isTitleFilter:false,
      titleFilter: []
      // hiddenBack: Boolean,    //是否隐藏返回按钮
      // hiddenShare: Boolean,   //是否隐藏分享按钮
    }
  },
  didMount() {
    let statusBarStorage = my.getStorageSync({ key: 'statusBarHeight' });
    let titleBarStorage = my.getStorageSync({ key: 'titleBarHeight' });
    let navBarStorage = my.getStorageSync({ key: 'navBarHeight' });

    let statusBarHeight = statusBarStorage.data.statusBarHeight;
    let titleBarHeight = titleBarStorage.data.titleBarHeight;
    let navBarHeight = navBarStorage.data.navBarHeight;
    this.setData({
      // 'navbarData.hiddenBack': hiddenBack,
      // 'navbarData.hiddenShare': hiddenShare,
      statusBarHeight,
      titleBarHeight,
      navBarHeight,
      filterTitleText:this.props.navbarData.titleFilter?this.props.navbarData.titleFilter[0].title: ''
    });
  },
  didUpdate() {

  },
  didUnmount() {

  },
  methods: {
    onShowPopoverTap(e) {
      this.setData({
        showChosePopper: !this.data.showChosePopper
      })
    },
    onMaskClick() {
      this.setData({
        showChosePopper: false,
      });
    },
    itemTap(e) {
      console.log(e)
      var id = e.currentTarget.dataset.id
        this.setData({
        activePopperIndex: id
      })
      this.setData({
        showChosePopper: false,
        filterTitleText: this.props.navbarData.titleFilter[id].title
      })
      // 点击切换之后传递数据给调用页面
      this.props.onChangeComment(id)
    }
  
  },
});

无法点击bug处理

刚开始开发的时候发现点击展示切换框无法触发，后面查阅支付宝开发文档后注意到这个设置showPenatrate

设置为允许点击穿透后成功解决问题。