小程序 自定义导航

<view class="navigation-bar" style="height:{{navHeight}}px;background:{{backgroundColor}}">
  <view class="navigation-container" style="height:{{capsule.height + 2*gapHeight}}px">
    <view class="navigation-left">
 
      <view class="slect-view">
       <targetPicker   timePickerList='{{list}}'  bind:changeDate='dateChange'></targetPicker>
     </view>
    </view>
    <view class="title" v-if="{{title}}" style="width:{{width>0 ? width+'rpx' : 'auto'}};">{{title}}</view>
  </view>
</view>
<view style="height:{{navHeight}}px;"></view>

`在这里插入代码片`
.navigation-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    background-image: url('/private-education/index/arch.png');
    background-repeat: no-repeat;
    background-size: 750rpx;
    .navigation-container {
      position: absolute;
      width: 100%;
      bottom: 0;
      display: flex;
      box-sizing: border-box;
      z-index: 99;
      justify-content: center;
      align-items: center;
      .title {
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        letter-spacing: 2rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }
      .navigation-left {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        display: flex;
        .slect-view {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 30rpx;
          .slect-item {
            position: relative;
            height: 48rpx;
            line-height: 48rpx;
            background: #f0f0f0;
            border-radius: 8rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #313836;
            padding: 0 17rpx;
            display: inline-block;
            display: flex;
            .item-name {
              display: inline-block;
              max-width: 170rpx;
              margin-right: 18rpx;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .icon-caret {
              position: relative;
              width: 16rpx;
              height: 19.5rpx;
              top: 18rpx;
            }
          }
        }
        .navigation-back {
          height: 100%;
          width: 96rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  

```javascript
const app = getApp();
import { area } from '../../../static/js/range'
Component({
    properties: {
        title: {
            type: String,
            value: '私教预约',
        },
        selectExamType: {
            type: String,
            value: '公务员',
        }
    },
  observers: {
    selectExamType: function (val) {
        this.setData({
          selectExam: val,
        });
      }
  },
    data: {
        navHeight: 0,
        currentIndex: [],
      	list: area
    },
    attached() {
       // console.log(this.data.list.INTENT_AREA.range.city)
        const res = app.globalData.systemInfo;
        this.setData({
            windowWidth: res.windowWidth,
            capsule: res.capsule,
            gapHeight: res.capsule.top - res.statusBarHeight,
            navHeight: res.capsule.bottom + res.capsule.top - res.statusBarHeight,
            hinttop: res.capsule.top,
        });
    },
    methods: {
        select(e) {
            const {item} =e.currentTarget.dataset;
            if(item.value===this.data.selectExam){
                return
            }else {
                this.setData({selectExam:item.value})
                this.triggerEvent('examTypeChange',item.value);
            }
        },
        bindPickerChange(e){
        },
        dateChange(e){
            wx.setStorageSync('targetPicker',e.detail)
        }
    },
});