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" |
|||
} |
@ -1,4 +1,6 @@ |
|||
{ |
|||
"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