Component({ properties: { background: { type: String, value: 'rgba(255, 255, 255, 1)' }, color: { type: String, value: 'rgba(0, 0, 0, 1)' }, titleText: { type: String, value: '导航栏' }, titleImg: { type: String, value: '' }, backIcon: { type: String, value: '' }, homeIcon: { type: String, value: '' }, fontSize: { type: Number, value: 16 }, iconHeight: { type: Number, value: 19 }, iconWidth: { type:Number, value: 58 } }, attached: function(){ var that = this; that.setNavSize(); that.setStyle(); }, data: { }, methods: { // 通过获取系统信息计算导航栏高度 setNavSize: function() { var that = this , sysinfo = wx.getSystemInfoSync() , statusHeight = sysinfo.statusBarHeight , isiOS = sysinfo.system.indexOf('iOS') > -1 , navHeight; if (!isiOS) { navHeight = 48; } else { navHeight = 44; } that.setData({ status: statusHeight, navHeight: navHeight }) }, setStyle: function() { var that = this , containerStyle , textStyle , iconStyle; containerStyle = [ 'background:' + that.data.background ].join(';'); textStyle = [ 'color:' + that.data.color, 'font-size:' + that.data.fontSize + 'px' ].join(';'); iconStyle = [ 'width: ' + that.data.iconWidth + 'px', 'height: ' + that.data.iconHeight + 'px' ].join(';'); that.setData({ containerStyle: containerStyle, textStyle: textStyle, iconStyle: iconStyle }) }, // 返回事件 back: function(){ wx.navigateBack({ delta: 1 }) this.triggerEvent('back', {back: 1}) }, home: function() { this.triggerEvent('home', {}); } }})
wxml：
<view> <view></view> <view> <view wx:if="https://www.jb51.net/{{backIcon}}" bindtap='back'> <image src='https://www.jb51.net/{{backIcon}}'></image> </view> <view wx:if="https://www.jb51.net/{{homeIcon}}" bindtap='home'> <image src='https://www.jb51.net/{{homeIcon}}'></image> </view> [链接描述][10] <view wx:if="https://www.jb51.net/{{titleImg}}"> <image src='https://www.jb51.net/{{titleImg}}'></image> </view> <view wx:if="{{titleText && !titleImg}}"> <text>{{titleText}}</text> </view> </view> </view>
wxss：
.navbar{ position: relative } .back-icon, .home-icon{ width: 28px; height: 100%; position: absolute; transform: translateY(-50%); top: 50%; display: flex; } .back-icon{ left: 16px; } .home-icon{ left: 44px } .back-icon image{ width: 28px; height: 28px; margin: auto; } .home-icon image{ width: 20px; height: 20px; margin: auto; } .nav-title, .nav-icon{ position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; font-size: 0; font-weight: bold; }
运行效果图：
文字标题：
图片标题：
4、总结
经过小灰的一番论证以及实践经验，最终总结出以上最终解决方案，但希望对小伙伴们有所帮助，如果小伙伴们觉得有用，记得给颗star哦 --> 点我，后续还会更新其他组件。