20 changed files with 156 additions and 23 deletions
@ -0,0 +1,50 @@ |
|||||
|
const app = getApp() |
||||
|
Component({ |
||||
|
data: { |
||||
|
selected: 0, |
||||
|
color: "#999", |
||||
|
selectedColor: "#3A80E7", |
||||
|
"list": [ |
||||
|
{ |
||||
|
"pagePath": "/pages/index/index", |
||||
|
"text": "消息", |
||||
|
"iconPath": "/images/home/message.png", |
||||
|
"selectedIconPath": "/images/home/messageSelected.png" |
||||
|
}, |
||||
|
{ |
||||
|
"pagePath": "/pages/work/work", |
||||
|
"text": "工作", |
||||
|
"iconPath": "/images/home/work.png", |
||||
|
"selectedIconPath": "/images/home/workSelected.png" |
||||
|
}, |
||||
|
{ |
||||
|
"pagePath": "/pages/statistics/statistics", |
||||
|
"text": "统计", |
||||
|
"iconPath": "/images/home/information.png", |
||||
|
"selectedIconPath": "/images/home/informationSelected.png" |
||||
|
}, |
||||
|
{ |
||||
|
"pagePath": "/pages/mine/mine", |
||||
|
"text": "我的", |
||||
|
"iconPath": "/images/home/mine.png", |
||||
|
"selectedIconPath": "/images/home/mineSelected.png" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
attached() { |
||||
|
}, |
||||
|
ready: function() { |
||||
|
this.setData({ |
||||
|
selected: app.globalData.selected |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
switchTab(e) { |
||||
|
console.log(e); |
||||
|
const data = e.currentTarget.dataset; |
||||
|
const url = data.path; |
||||
|
app.globalData.selected = data.index; |
||||
|
wx.switchTab({url}) |
||||
|
} |
||||
|
} |
||||
|
}) |
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"component": true, |
||||
|
"usingComponents": {} |
||||
|
} |
@ -0,0 +1,17 @@ |
|||||
|
<view class="tab-bar"> |
||||
|
|
||||
|
<view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> |
||||
|
<!-- <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image> --> |
||||
|
<!-- <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view> --> |
||||
|
<!-- <view > |
||||
|
<image wx:if="{{index!=selected}}" src="{{item.iconPath}}"></image> |
||||
|
<image wx:else class="bigicon" src="{{item.selectedIconPath}}"></image> |
||||
|
<view wx:if="{{index!=selected}}" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view> |
||||
|
</view> --> |
||||
|
<view > |
||||
|
<image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image> |
||||
|
<view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view> |
||||
|
</view> |
||||
|
<view class="isIPhoneXRegexBottom"></view> |
||||
|
</view> |
||||
|
</view> |
@ -0,0 +1,38 @@ |
|||||
|
.tab-bar { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: auto; |
||||
|
background: white; |
||||
|
display: flex; |
||||
|
box-shadow: 0px 6rpx 18rpx 0px rgba(216,216,216,0.66); |
||||
|
} |
||||
|
.isIPhoneXRegexBottom { |
||||
|
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ |
||||
|
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ |
||||
|
} |
||||
|
|
||||
|
.tab-bar-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
padding-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.tab-bar-item image { |
||||
|
width: 54rpx; |
||||
|
height: 54rpx; |
||||
|
} |
||||
|
/* .tab-bar-item image.bigicon{ |
||||
|
width: 70rpx; |
||||
|
height: 70rpx; |
||||
|
} */ |
||||
|
.tab-bar-item view { |
||||
|
font-size: 22rpx; |
||||
|
color:#999999 |
||||
|
} |
||||
|
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 3.2 KiB |
@ -1,4 +1,6 @@ |
|||||
{ |
{ |
||||
"usingComponents": {}, |
"usingComponents": { |
||||
|
"custom-tab-bar":"../../components/custom-tab-bar" |
||||
|
}, |
||||
"navigationStyle": "custom" |
"navigationStyle": "custom" |
||||
} |
} |
@ -1,4 +1,6 @@ |
|||||
{ |
{ |
||||
"navigationStyle": "custom", |
"navigationStyle": "custom", |
||||
"usingComponents": {} |
"usingComponents": { |
||||
|
"custom-tab-bar":"../../components/custom-tab-bar" |
||||
|
} |
||||
} |
} |
@ -1,3 +1,6 @@ |
|||||
{ |
{ |
||||
"navigationStyle": "custom" |
"navigationStyle": "custom", |
||||
|
"usingComponents": { |
||||
|
"custom-tab-bar":"../../components/custom-tab-bar" |
||||
|
} |
||||
} |
} |
Loading…
Reference in new issue