微信小程序自定义顶部导航组件_javascript技巧_

                                                       {{pageName}}

const App = getApp(); Component({   // 组件的属性列表   properties: {     pageName: String, //中间的title     showNav: { //判断是否显示左上角的按钮           type: Boolean,       value: true     },     showHome: { //判断是否显示左上角的home按钮       type: Boolean,       value: true     },     imgUrl:{//图片背景路径       type: String,       value: App.globalData.imgLink+'index.jpg',     },   },   // 组件的初始数据   data: {     showNav: true, //判断是否显示左上角的home按钮     showHome: true, //判断是否显示左上角的按钮   },   lifetimes: {     // 生命周期函数，可以为函数，或一个在methods段中定义的方法名     attached: function() {       this.setData({         navHeight: App.globalData.navHeight, //导航栏高度         navTop: App.globalData.navTop, //胶囊按钮与顶部的距离         jnheight: App.globalData.jnheight, //胶囊高度         jnwidth: App.globalData.jnwidth //胶囊宽度       })     }   },   // 组件的方法列表   methods: {     //回退     navBack: function() {       wx.navigateBack()     },     //回主页     navHome: function() {       wx.switchTab({         url: '/pages/index/index'       })     },   } })

/* components/navbar.wxss */ .navbar {   width: 100%;   overflow: hidden;   position: sticky;   top: 0;   left: 0;   z-index: 10;   flex-shrink: 0;   background: #fff;   } .navbar_left {   display: -webkit-flex;   display: flex;   -webkit-box-align: center;   -ms-flex-align: center;   -webkit-align-items: center;   align-items: center;   position: absolute;   left: 10px;   z-index: 11;   line-height: 1;   border: 1rpx solid #f0f0f0;   border-radius: 40rpx;   overflow: hidden;   background: rgba(255, 255, 255, 0.6); } .navBack image{   width: 60%; }   .navbar_left view {   width: 50%;   display: flex;   align-items: center;   justify-content: center; }   .nav_line {   border-left: 1rpx solid #f0f0f0; }   .navbar_title {   width: 100%;   box-sizing: border-box;   padding-left: 115px;   padding-right: 115px;   height: 32px;   line-height: 32px;   text-align: center;   position: absolute;   left: 0;   z-index: 10;   color: #333;   font-size: 16px;   font-weight: bold;   text-overflow: ellipsis;   overflow: hidden;   white-space: nowrap; }

// app.js App({   onLaunch() {     //设置导航栏     //获取菜单按钮的布局位置信息     let menuButtonObject = wx.getMenuButtonBoundingClientRect();     //获取系统信息     wx.getSystemInfo({       success: res => {         console.log('xxxx', res)         //状态栏的高度         let statusBarHeight = res.statusBarHeight,           //胶囊按钮与顶部的距离           navTop = menuButtonObject.top,           navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;         let globalData = this.globalData;         globalData.navHeight = navHeight;//导航栏高度         globalData.navTop = navTop;//胶囊按钮与顶部的距离         globalData.jnheight = menuButtonObject.height;//胶囊的高度         globalData.jnwidth = menuButtonObject.width;//胶囊的宽度         globalData.screenHeight = res.screenHeight;//屏幕高度       },       fail(err) {         console.log(err);       }     });   },   //设置全局对象   globalData: {     navHeight: 0,     navTop: 0,     jnheight: 0,     jnwidth: 0,     screenHeight: 0,   } })

 "window": {     "backgroundTextStyle": "light",     "navigationBarBackgroundColor": "#fff",     "navigationBarTitleText": "Weixin",     "navigationBarTextStyle": "black",     "navigationStyle": "custom"   },

{   "usingComponents":{     "navbar":"/components/navbar/navbar"   } }

Page({   data:{     navbar:{       shoppingName:'首页',     },   }