21 changed files with 238 additions and 23 deletions
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
@ -0,0 +1,103 @@ |
|||
// pages/navBar/navBar.js
|
|||
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: 18 |
|||
}, |
|||
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', {}); |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
<view class='nav' style='height: {{status + navHeight}}px'> |
|||
<view class='status' style='height: {{status}}px;{{containerStyle}}'></view> |
|||
<view class='navbar' style='height:{{navHeight}}px;width:100%;position: fixed;top: 0;left: 0;padding-top: {{status}}px;z-index: 99;{{containerStyle}}'> |
|||
<view class='back-icon' wx:if="{{backIcon}}" bindtap='back' style="padding-top: {{status}}px;"> |
|||
<image src='{{backIcon}}'></image> |
|||
</view> |
|||
<view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'> |
|||
<image src='{{homeIcon}}'></image> |
|||
</view> |
|||
<view class='nav-icon' wx:if="{{titleImg}}"> |
|||
<image src='{{titleImg}}' style='{{iconStyle}}'></image> |
|||
</view> |
|||
<view class='nav-title' style="padding-top: {{status}}px;" wx:if="{{titleText && !titleImg}}"> |
|||
<text style='{{textStyle}}'>{{titleText}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,34 @@ |
|||
.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-weight: bold; |
|||
} |
|||
@ -1,8 +1,9 @@ |
|||
{ |
|||
"navigationBarTitleText": "联系我们", |
|||
"usingComponents": { |
|||
"van-icon": "@vant/weapp/icon/index" |
|||
|
|||
} |
|||
"van-icon": "@vant/weapp/icon/index", |
|||
"navBar": "/components/navigationBar/index" |
|||
}, |
|||
"navigationStyle": "custom" |
|||
|
|||
} |
|||
Loading…
Reference in new issue