微信小程序端自定义头部导航栏

• 自定义导航栏代码

• 个人中心将手机号等信息用“小眼睛”开关来展示手机号显示和带**的半隐藏

自定义导航栏代码

app.json文件

 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "wechatname",
    "navigationBarTextStyle": "black",
    "navigationStyle": "default"        重点是添加这一行代码语句！！！！！
  },

index.json文件

{
  "navigationStyle":"custom",  重点是添加这一代码语句！！！！
  "component": true,
  "usingComponents": {}
}

app.js文件

 onLaunch: function () {
    wx.getSystemInfo({
      success: res => {
        let custom = wx.getMenuButtonBoundingClientRect();//菜单按钮
        let systemInfo = wx.getSystemInfoSync();
        this.globalData.custom = custom;
        this.globalData.customBar = custom.height;
        this.globalData.statusBar = custom.top;
        this.globalData.navBarHeight = (custom.top - systemInfo.statusBarHeight) * 2 + custom.height + systemInfo.statusBarHeight;
      }
    })
}

index.wxml

<view class="navbar" style="height:{{navBarHeight}}px;">
  <view class="navbar__wrapper" style="margin-top: {{statusBar}}px;">
  <view class="duiqi">  

<!--
在此处的 <view>容器里面 添加你要在头部导航栏里所用的模块
我在这里添加的搜索栏

    <van-search
  value="{{ value }}"
  input-align="center"
  placeholder="请输入搜索关键词"
/>

//注意：在此声明----仅用于展示 上面的搜索栏样式 我没有去调试布局，具体根据你自己情况而定

-->
    



</view>

  </view>
</view>
<view class="content" style="margin-top:{{navBarHeight}}px;"></view>

index.css

 /* 最顶部的手机烂的样式（你手机显示“时间”“电量”的拿一小块导航栏）*/
.navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background:  /*这里是你导航栏背景颜色，自己可以配制自己喜欢的颜色 */
  z-index: 10;
}

 /* 下面的胶囊栏的样式（就是那 三个并排小黑点和一个大圆圈包裹一个实心小圆圈的那个位置）*/
.navbar__wrapper {
  background:/*这里是你导航栏背景颜色，自己可以配制自己喜欢的颜色 */
  width: 100%;
  height: 89rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

index.js

const app=getApp()
Page({

data: {
      statusBar: app.globalData.statusBar,
      customBar: app.globalData.customBar,
      navBarHeight: app.globalData.navBarHeight,
  },

})

图片成果演示：

手机号信息用小眼睛按钮显示隐藏

个人中心页面

<view class="mydata">
        <view>

          <view class="myname">
            <van-icon color="#f2efbf" name="user-circle-o" />
            <text>{{name}}</text>
          </view>


          <view class="myphone" bindtap="eyecilck">
            <text>{{eyephone}}</text>
            <van-icon style="padding: 0.8rem;" name="{{eyeType? CeyeName:OeyeName}}" />
          </view>
    </view>
</view>

个人中心.js

const app = getApp();
let regx = /(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    

  },

  /**
   * 组件的初始数据
   */
  data: {
      CeyeName:"closed-eye",
      OeyeName:"eye-o",
      eyeType:true,
      eyephone:"",

    name:"L_Augety",
    phone:"17543212300",

    }
/**
   * 组件的方法列表
   */
  methods: {
       eyecilck(){
      if(this.data.eyeType ==true){
        this.setData({
          eyeType:false,
          eyephone:this.data.phone

        })
      }else{
        this.setData({
          eyeType:true,
          eyephone:this.matchPhoneNum(this.data.phone,regx)
        })
      }

    },




 onShow(){
      let regx = /(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g;
      this.setData({
        eyephone: this.matchPhoneNum(this.data.phone,regx)
      })
    },
    matchPhoneNum(str,regx){
      var phoneNums = str.match(regx);
      if(phoneNums){
          for(var i= 0;i<phoneNums.length;i++){
              var temp  = phoneNums[i]
              temp = temp.replace(/^(\d{3})\d{4}(\d{4})$/,"$1****$2");
              str = str.replace(phoneNums[i],temp);
          }
      }
      return str;
  }
    


    }

})

成果展示：

点击前：

点击后：

 

最后

• 我用的是vant组件库，其中小图标（比如：上面的“小眼睛”图标）等组件需要自己去配置，有什么问题可以私信或评论区留言给我，三克油~~~

• 另外，有一些css布局样式需要自己去调整，我只在此展示重要的部分~~~