备注:小程序组件 js文件不要写 page()等,开发过程没有问题上传在真机上会报错
一下以自定义导航头部为实例:
header.js文件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// pages/components/header/header.js // // 启用插槽 Component({ options: { multipleSlots: true }, properties:{ headerOpt:{ type:Object, value:{ showGoBack:true, showGoHome:true, backPath:'', homePath:'', styles:'', titleImg:'', title:'KOC' }, observer: function(newVal, oldVal) { // 属性值变化时执行 this.data.headerOpt = { ...oldVal, ...newVal } this.setData({ headerOpt:this.data.headerOpt }) // console.log(this.data.headerOpt) } }, // 状态栏高度 statusBarHeight: { type:String, value:wx.getStorageSync('statusBarHeight') + 'px' }, // 导航栏高度 navigationBarHeight:{ type:String, value: wx.getStorageSync('navigationBarHeight') + 'px' }, // 胶囊按钮高度 menuButtonHeight:{ type:String, value: wx.getStorageSync('menuButtonHeight') + 'px' }, // 导航栏和状态栏高度 navigationBarAndStatusBarHeight:{ type:String, value: wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px' } }, methods: { // 回到首页 goHome(val) { // console.log(this.data.headerOpt.homePath) if(this.data.headerOpt.homePath !=''){ wx.redirectTo({ //目的页面地址 原页面保留 url: '/pages' + this.data.headerOpt.homePath, success: function(res){}, }) return false } // if(pages.length > 1){ // wx.navigateBack({ // delta: pages.length // }); // }else{ // 清除栈页面元素 wx.reLaunch({ //目的页面地址 原页面保留 url: '/pages/kocindex/kocindex', success: function(res){}, }) var pages = getCurrentPages(); // } }, // 返回上一页或者指定页面 goBack:function(){ if(this.data.headerOpt.backPath !=''){ wx.redirectTo({ //目的页面地址 原页面保留 url: '/pages' + this.data.headerOpt.backPath, success: function(res){}, }) return false } var pages = getCurrentPages(); // console.log(pages) // return false; if(pages.length == 1){ // 清除栈页面元素 回到首页 wx.reLaunch({ //目的页面地址 原页面保留 url: '/pages/kocindex/kocindex', success: function(res){}, }) }else{ wx.navigateBack(); } } }, })
header.json文件:
{ "usingComponents": {}, "component": true, "navigationStyle":"custom" }
备注: "component": true,代表开启组件模式
"navigationStyle":"custom" 禁掉默认微信小程序自带返回等
header.wxml文件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!--pages/components/header/header.wxml--> <wxs src="../../../filter/urlFilter.wxs" module="filter" /> <view class="navigation-container" style="{{headerOpt.styles +';'+ 'height: ' + navigationBarAndStatusBarHeight}}"> <!--空白来占位状态栏--> <view style="{{'height: ' + statusBarHeight}}"></view> <!--自定义导航栏--> <view class="navigation-bar" style="{{'height:' + navigationBarHeight}}" > <view class="navigation-buttons {{(headerOpt.showGoBack && !headerOpt.showGoHome)?'clearBoder':''}}" style="{{'height:' + menuButtonHeight}}" wx:if="{{headerOpt.showGoBack || headerOpt.showGoHome}}"> <view wx:if="{{headerOpt.showGoBack}}" bindtap="goBack" class="goback"><image mode="widthFix" src="{{filter.imgFullPath('/images/goback.png')}}"></image></view> <view wx:if="{{headerOpt.showGoHome}}" bindtap="goHome" class="gohome"><image mode="widthFix" src="{{filter.imgFullPath('/images/gohome.png')}}"></image></view> </view> <view class="navigation-title" style="{{'line-height:' + navigationBarHeight}}"> <image wx:if="{{headerOpt.titleImg !=''}}" src="{{filter.imgFullPath(headerOpt.titleImg)}}" style="{{headerOpt.imgStyle}}"></image> <text wx:else style="{{headerOpt.styles}}">{{headerOpt.title}}</text> </view> </view> </view> <!--空白占位fixed空出的位置--> <view style="{{'height: ' + navigationBarAndStatusBarHeight}};"></view>
header.wxml文件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* pages/components/header/header.wxss */ /* navigationBar.wxss */ .navigation-container { position: fixed; width: 100%; z-index: 99; /* top: 4rpx; */ left: 0; background-color: #ffffff; overflow: hidden; } .navigation-bar { position: relative; display: flex; flex-direction: row; align-items: center; } .navigation-buttons { display: flex; align-items: center; justify-content: center; margin-left: 10px; border: 1px solid rgba(0, 0, 0, 0.05); box-sizing: border-box; border-radius: 15px; background-color: transparent; padding: 0rpx 10rpx; } .clearBoder{ border:0rpx; } .nav-img{ height: 16px; width: 16px; } .navigation-title { position: absolute; left: 104px; right: 104px; text-align: center; font-size: 16px; font-weight: bold; color: #000000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navigation-title text{ font-size: 16px; font-weight: bold; color: #000000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navigation-buttons .goback{padding: 0rpx 25rpx;line-height: 25rpx;} .navigation-buttons .gohome{padding: 0rpx 25rpx;line-height: 25rpx;} .navigation-buttons .goback image{width: 40rpx;height: 40rpx;} .navigation-buttons .gohome image{width:34rpx;height: 34rpx;}