微信小程序：自定义导航栏

标签：obj 自定义 微信 changedPath newVal oldVal let font 导航

自定义导航栏使用weapp-navigation-bar组件，网址：https://github.com/mulook/weapp-navigation-bar

使用说明：

1、app.json配置以下属性

"window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#008EFF",
        "navigationBarTitleText": "投资孝感",
        "navigationBarTextStyle": "white",
        "navigationStyle": "custom"
    },

2、把组件拷贝到项目里

index.js

Component({
  properties: {
    // 这里定义属性，属性值可以在组件使用时指定
    back: {//是否显示返回
      type: Boolean,
      value: false,
    },
    background: {//导航栏背景色
      type: String,
      value: '#ffffff',//默认
      observer: function(newVal,oldVal,changedPath){
        if(!newVal){
          let obj = {};
          obj[changedPath[0]] = oldVal;
          this.setData(obj);
        }
      }
    },
    placeholderBg: {//导航栏占位栏背景色
      type: String,
      value: 'transparent',//默认
      observer: function(newVal,oldVal,changedPath){
        if(!newVal){
          let obj = {};
          obj[changedPath[0]] = oldVal;
          this.setData(obj);
        }
      }
    },
    color: {//导航栏字体色
      type: String,
      value: '#000000',//默认
      observer: function(newVal,oldVal,changedPath){
        if(!newVal){
          let obj = {};
          obj[changedPath[0]] = oldVal;
          this.setData(obj);
        }
      }
    },
    fontSize: {//导航栏字大小
      type: String,
      value: '16px',//默认
      observer: function(newVal,oldVal,changedPath){
        if(!newVal){
          let obj = {};
          obj[changedPath[0]] = oldVal;
          this.setData(obj);
        }
      }
    },
    title: {//导航栏标题
      type: String,
      value: 'none', //默认
      observer: function(newVal,oldVal,changedPath){
        // console.log(newVal,oldVal,changedPath);
        if(!newVal){
          let obj = {};
          obj[changedPath[0]] = oldVal;
          this.setData(obj);
        }
      }
    },
    fixed: {//导航栏是否fixed定位
      type: Boolean,
      value: true, //默认
      observer: function(newVal,oldVal,changedPath){
        // console.log(newVal,oldVal,changedPath);
        if(newVal !== false && newVal !== true){
          let obj = {};
          obj[changedPath[0]] = oldVal;
          this.setData(obj);
        }
      }
    },
    backStyle: {//导航栏返回按钮的风格
      type: String,
      value: 'normal', //默认值 可赋值simple或者normal
      observer: function (newVal, oldVal, changedPath) {
        // console.log(newVal,oldVal,changedPath);
        if (!newVal) {
          let obj = {};
          obj[changedPath[0]] = oldVal;
          this.setData(obj);
        }
      }
    },
    backEvent: {//是否绑定返回按钮事件
      type: Boolean,
      value: false, //默认
      observer: function (newVal, oldVal, changedPath) {
        // console.log(newVal,oldVal,changedPath);
        if (newVal !== false && newVal !== true) {
          let obj = {};
          obj[changedPath[0]] = oldVal;
          this.setData(obj);
        }
      }
    },
    backHomeEvent: {//是否绑定返回首页按钮事件
      type: Boolean,
      value: false, //默认
      observer: function (newVal, oldVal, changedPath) {
        // console.log(newVal,oldVal,changedPath);
        if (newVal !== false && newVal !== true) {
          let obj = {};
          obj[changedPath[0]] = oldVal;
          this.setData(obj);
        }
      }
    },
  },
  data: {
    // 这里是一些组件内部数据
    height: 44,//导航栏高度,
    paddingTop: 20,//导航栏上内边距对应状态栏高度
    showHomeButton: false,//是否显示返回首页
    show: true,//是否显示导航栏
    navigationBarTextStyle: 'black'
  },
  attached: function(option){
    //检测首页是否在当前页面栈中
    let pages = getCurrentPages();
    let showHomeButton = false;
    if(pages.length < 2 && pages[0].route != __wxConfig.pages[0]){
      showHomeButton = true;
    }
    //导航栏自适应
    let systemInfo = wx.getSystemInfoSync();
    console.log(systemInfo)
    let reg = /ios/i;
    let pt = 20;//导航状态栏上内边距
    let h = 44;//导航状态栏高度
    if(reg.test(systemInfo.system)){
        pt = systemInfo.statusBarHeight;
        h = 44;
    }else{
        pt = systemInfo.statusBarHeight;
        h = 48;
    }
    console.log(h)
    var navigationBarTextStyle = __wxConfig.global.window.navigationBarTextStyle;//获取当前项目导航栏文本风格
    this.setData({
      height: h,
      paddingTop: pt,
      showHomeButton: showHomeButton,
      navigationBarTextStyle: navigationBarTextStyle
    })
    console.log(this);
  },
  methods: {
    // 这里是一个自定义方法
    /**
     * 返回上一页
     */
    navigateBack(){
      if (!this.properties.backEvent){
        this.runBack();
        return;
      }
      this.triggerEvent('back');
    },
    runBack(){
      let pages = getCurrentPages();
      if (pages.length < 2 && pages[0].route != __wxConfig.pages[0]) {
        wx.reLaunch({ url: '/' + __wxConfig.pages[0] })
      } else {
        wx.navigateBack({ delta: 1 });
      }
    },
    /**
     * 返回首页
     */
    navigateBackHome(){
      if (!this.properties.backHomeEvent) {
        this.runBackHome();
        return;
      }
      this.triggerEvent('backHome');
    },
    runBackHome() {
      let pages = getCurrentPages();
      if (pages[0].route === __wxConfig.pages[0]) {
        wx.navigateBack({ delta: 10 });
      } else {
        wx.reLaunch({ url: '/' + __wxConfig.pages[0] })
      }
    },
    /**
     * 切换导航栏显示
      */
    toggleShow(){
      if(!this.data.show){
        this.setData({ show: true });
      }
    },
    /**
     * 切换导航栏隐藏
      */
    toggleHide() {
      if (this.data.show) {
        this.setData({ show: false });
      }
    }
  }
})

index.json

{
    "component": true
}

index.wxml

<view class="navigation-bar" style="padding-top:{{paddingTop}}px;height:{{height}}px;line-height:{{height}}px;background:{{background}};color:{{color}};font-size:{{fontSize}};position:{{fixed&&'fixed'}};transform:translateY({{!show?-paddingTop-height+'px':'0'}});">
    <view class="back" wx:if="{{back}}" style="padding-top:{{paddingTop}}px;height:{{height}}px;line-height:{{height}}px;">
        <view class="style-simple" wx:if="{{backStyle==='simple'}}">
            <view class="icon-fanhui icon" bind:tap="navigateBack"></view>
            <view class="back-home icon" wx:if="{{showHomeButton}}" style="" bind:tap="navigateBackHome">首页</view>
        </view>
        <view class="style-normal {{navigationBarTextStyle}}" wx:if="{{backStyle==='normal'}}">
            <view class="icon-fanhui icon" bind:tap="navigateBack"></view>
            <view class="split"></view>
            <view class="back-home icon" style="" bind:tap="navigateBackHome"></view>
        </view>
    </view>
    <view class="title">{{title!='none'?title:''}}</view>
</view>
<view class="navigation-bar-holder" wx:if="{{fixed && show}}" style="background:{{placeholderBg}};padding-top:{{paddingTop}}px;height:{{height}}px;line-height:{{height}}px;width:750rpx;"></view>

index.wxss

.navigation-bar{
  position: relative;
  left: 0;
  top: 0;
  width: 750rpx;
  color: #ffffff;
  background: #45b9e5;
  z-index: 99;
  text-align: center;
  transition: 300ms;
}
.back{
  position: absolute;
  left: 0;
  top: 0;
  min-width: 70rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.icon{
  display: inline-block;
  font-family: 'iconfont' !important;
  speak: none;
  font-style: normal;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  font-size: 38rpx;
}
.style-simple{
  display: flex;
  margin-left: 16rpx;
  align-items: center;
}
.style-simple .icon-fanhui:before { content: "\e624";}
.style-simple .back-home{
  width: auto;
  text-align: center;
  font-size: 30rpx;
}
.black{
  background: #ffffff;
  border-color:#e5e5e5 !important;
}
.white{
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.style-normal{
  border: 1rpx solid #ededed;
  border-radius: 32rpx;
  height: 64rpx;
  width: 176rpx;
  display: flex;
  margin-left: 16rpx;
  align-items: center;
}
.style-normal .icon-fanhui{
  line-height: 64rpx;
  width: 87rpx;
  font-size: 44rpx;
}
.style-normal .icon-fanhui:before { content: "\e7eb";}
.style-normal .back-home{
  width: 87rpx;
  text-align: center;
  font-size: 44rpx;
}
.style-normal .back-home:before { content: "\e7c6";}
.style-normal .split{
  border-left: 1rpx solid #e5e5e5;
  height: 32rpx;
  width: 1rpx;
}
.title{
  font-weight: bold;
}
.navigation-bar-holder{
  background: transparent;
  position: relative;
  z-index: 2;
}
@font-face {
     font-family: 'iconfont';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOgAA0AAAAAB4QAAANLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCYhEICoQsgzgLEAABNgIkAxYEIAWDDwdIGxgGUVRQUsg+EqrbejExJkZMFIeJQzwIETcn38XD0/74zp2Zhw8tgOhMpk0/L0N1dVPfbWBIanLaRuX3Y93by6CYlCumkE/QyZz9NZPCx8HSPnVP5sEtOYOzmAJ6qZ8/kLIogQKLKHqeZ8PnxwU20OFUh7wBdybxpIadEPDq0kITwLuhLyu5SyP0YwKQhFALBQlRxD8i6WJ6CJwFsuMrvzAlqTMOhgFb2bUnuhTgw7yPrzPtqNFMHUMAMjKmQWAULzCNYBXQr5UUub2MfLz48WvX4Xp38vtZhyZFzZoLCISKmoAlEpKfJwCbja6TQAMGUeMKngJQABBCFnNXTxOmVMzoLFWWA10xvUxV8biu64jNKNc0DbGZMmXRpDGlM+nhQ63H/fv0wQM8/ihD12YkaMo0RSH2230/7vJYwsabrid99zK/ZefcTiVeG4+/EqFOT1IUNDBN1VEGm6Z0lrtqqY3SzUBV4UAYc5Y8Ht80cxsrlRDO4CTEtkrS2GYAKUuyS1krYtoYZVbo9DJVR+2RZB3q617Seuzc4jPmlreXnDhsu14UlfJ4EbfaPtaBMwQsHz9rl0A+9z8W90Pw812doQnb00oaTtfWnX5Ve/pMXcPQoyVu7VMcSD9J5tC0adyK/PwnvyZ+PS9t/bdi18SumzEt/6+gL/Dk/btbJxXOFv1n7XT1Ti1wu/f4LAibPczYkrTPf9OWLbOda+x58MTmC3db1w13YtzM20amBExk1F2ve9Ies3TSes/Iarnn5NINhfV15dlZcO/ydt6/trlbcJgcRi2+/eJ2k1R5FvHV1nY8gECwZGHjwQLL8P8tLgbtvLCO5geZopVAMNA8F4D8oJtrpTD+BQp/lQvzA0JjNR4khMAqAOh3ToDQGgOBpLYYAtk8HRAoWjcFqPR5DoFa6xdelB5hGJCQ9JsK2SbeUAxbBZUJjlbVhr1kUKJWjXJObgKjLDkL1AFsV6aUQbNq8C80DWBDGlL/5AayMoQvT96IUKQsOmSMr0AeAnjw5c1HCHhpisspDXIZ8fX0JqGkTsLSfQM9Ajw2I7ahachuo0EjQ7BC+LSAhwOjex9P76xO0mg2t0FIkSJHiareU1SzqNlgtDQywjLBCLMCAA==) format('woff2'),
        url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAWoAA0AAAAAB4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFjAAAABoAAAAch8QPdUdERUYAAAVwAAAAHAAAAB4AJwANT1MvMgAAAaAAAABGAAAAVjz3Wr5jbWFwAAACAAAAAFAAAAFizgvTb2dhc3AAAAVoAAAACAAAAAj//wADZ2x5ZgAAAmAAAAHwAAACLBoXztpoZWFkAAABMAAAADAAAAA2FT8saWhoZWEAAAFgAAAAHQAAACQHowOFaG10eAAAAegAAAAVAAAAFg1eAS5sb2NhAAACUAAAABAAAAAQASYBtG1heHAAAAGAAAAAHgAAACAATABEbmFtZQAABFAAAADhAAABj76Bsdhwb3N0AAAFNAAAADQAAABIIIgIznjaY2BkYGAAYkf1Evl4fpuvDNwsDCBwk/+LGZy2/t/AfJS5AcjlYGACiQIAARIJ33jaY2BkYGBu+N/AEMPCAALMRxkYGVABCwBVlQMxAAAAeNpjYGRgYGBncGRgZgABJiBmZACJOYD5DAAJlACRAAB42mNgZGFg/MLAysDANJPpDAMDQz+EZnzNYMzICRRlYGNmgAMBBJMhIM01hYHhmcrz18wN/xsYYpgbGBqAwowgOQAVMQ1CAAB42mNhgAAWCP7MkMZgzfADAAsaApkAAAB42mNgYGBmgGAZBkYGEIgB8hjBfBYGByDNw8DBwARkMzxTed7x/Njz1///g5Qh8yTvS9RI2EtIQ02AA0Y2BrgQIxOQYGJAU8Aw7AEAK6wTDwAAAAAAAAAAADoAngDsARZ42iWRv2tTURTH7/ee+yMvL7+eTfLSBFP7ogmYmsQ2yVPSPIJIHaSri0MFRRyTOAgdpDjoortkylRcpCBdLChE0ckxg4hj/QscFIQbb5QD93A453zPuZ/DwH4uDvgvOmABYw5SyGXzPsrY2ox4p11Dw74hInTa1Uqg+GdzPZ5MxfGeXCnjWsbMNS64xjuSGVcm6JHZdoJkej1ubpCUOi7dGN5yrYX1H4Ur3YxkDOz+4jtN6Dwb2EA3UAlSyC5ndsNutYmq0imuU9AqqDVQq9aq7TBCaJObft6aTeXXkO92wrZW9OJK7/Xd8Ww0/DB++nWDE10lBXCO4l40eD4oh4VWsVRKXii0+jaMmunkNkHQkVBwiB9t3Lw1nP2YjSb7ti0LIi4lRXv/W5pLhbXQXyoUW+lMkyuJOqQ4jnMwYr3FnD7RJVZia+zykp/dV2moXLYse/DWvX9faqPS2Qq9imVYR6DOouJV4IPemMdFlckoc2+FtOMmU7GL/LieLDhnzMPh8NvE96aeP7mDsY/beIYnRSXEsrik0wnXUWROsOM4Kx3z6su+OTn1fN87xQ5Gvjm0jH8zwef8D8tZxnZyYNfK+pZaH+2ag4jzubAS/UTCHsZR5iUecAI/3CXJzdQ555gpCbkbk1jFKheCsb+JB2eOeNp9jj9uwjAUh79AiFq1Q9WhSxcPLB0SJZZAggOgLl25AASUobEUysJBWHsGVo7BAThDj8DP9HXpgCXbn5+/9wd4ZE9CXAl3PBv3yHgz7jNkZ5zKORgPeOBknCn+IzNJ7xV5umZF7qn+q3Gfd0rjVM638YAXjsaZ4mcaFgRaVtfzC5pFaFehFX1Qs5Sw5VOPetlsdc/Mi3fHWorDU6ibY6r9v95v1DMmZ6TtZVZMVEg9ZqFb184XpZu6v75CP85HuS8rWTfGm6t3x0ZK/HKqGqdgXnebJrSuKspb6Rdv+jyYAAAAeNpjYGJABowM6IAdLMrEyMTIzMjCyMqWlpiXUZrJVpSak5+YwpKRn5vKkpOaVgIAamYIegAAAAH//wACeNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BgYGQAgqtL1DlA9E3+L2YwGgA8OQXOAAA=) format('woff');
    font-weight: 500;
    font-style: normal;
}

3、页面使用

wxml

<view>
  <navigationBar id="navigationBar" color="{{color}}" title="{{title}}" back="{{false}}" background="{{barBg}}"></navigationBar>
  </view>

json

{
  "usingComponents": {
    "navigationBar":"/components/navigationBar/index"
  },
  "navigationBarTitleText": "投资孝感",
  "disableSwipeBack": true,
  "navigationStyle": "custom"
}

js

Page({
    /**
     * 页面的初始数据
     */
    data: {
      title: '投资孝感', // 标题
      barBg: '#008EFF',//#ff6600
      color: '#ffffff',//#ffffff
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onl oad: function (options) {

    }
  });
  

4、效果

 

标签：obj,自定义,微信,changedPath,newVal,oldVal,let,font,导航
From： https://www.cnblogs.com/zwh0910/p/17088076.html