微信小程序自定义顶部导航组件
本文实例为大家分享了微信小程序自定义顶部导航组件,供大家参考,具体内容如下
在components中新建文件夹navbar
components/navbar.wxml
<!--components/navbar.wxml--> <view class="navbar" style="height:{{navHeight+5}}px;background-image:url('{{imgUrl}}') "> <!-- 左上角 返回按钮 和 home按钮 wx:if="{{showNav}}" 是控制左上角按钮的显示隐藏,首页不显示 --> <view class="navbar_left" style="top:{{navTop}}px;height:{{jnheight-1}}px;width:{{jnwidth-3}}px" wx:if="{{showNav}}"> <!-- 控制返回按钮的显示 --> <view class="navBack" bindtap="navBack"> <image src="/images/back.png" mode="widthFix"></image> </view> <!-- home按钮 wx:if="{{showHome}}" 是控制左上角 home按钮的显示隐藏--> <view class="nav_line" bindtap="navHome" wx:if="{{showHome}}"> <image src="/images/index.png" mode="widthFix" style="width:50%"></image> </view> </view> <!-- 中间标题 --> <view class="navbar_title" style="top:{{navTop}}px;">{{pageName}}</view> </view>
components/navbar.js
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
/* 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.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, } })
在app.json中设置导航自定义,去除默认的导航 “navigationStyle”: "custom"
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle": "black", "navigationStyle": "custom" },
引用到pages中的文件里
json文件中引用组件****
{ "usingComponents":{ "navbar":"/components/navbar/navbar" } }
html文件中
<navbar page-name="{{navbar.shoppingName}}"></navbar>
js文件中
Page({ data:{ navbar:{ shoppingName:'首页', }, }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)