@ -0,0 +1,45 @@ |
|||||
|
const app = getApp() |
||||
|
Component({ |
||||
|
data: { |
||||
|
selected: 0, |
||||
|
color: "#7A7E83", |
||||
|
selectedColor: "#3cc51f", |
||||
|
"list": [ |
||||
|
{ |
||||
|
"pagePath": "/pages/home/home", |
||||
|
"text": "", |
||||
|
"iconPath": "/images/main/icon01.png", |
||||
|
"selectedIconPath": "/images/main/icon01-a.png" |
||||
|
}, |
||||
|
{ |
||||
|
"pagePath": "/pages/message/message", |
||||
|
"text": "消息", |
||||
|
"iconPath": "/images/main/icon02.png", |
||||
|
"selectedIconPath": "/images/main/icon02-a.png" |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
"pagePath": "/pages/my/my", |
||||
|
"text": "我的", |
||||
|
"iconPath": "/images/main/icon03.png", |
||||
|
"selectedIconPath": "/images/main/icon03-a.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,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
@ -0,0 +1,8 @@ |
|||||
|
<!--miniprogram/custom-tab-bar/index.wxml--> |
||||
|
<view class="tab-bar"> |
||||
|
<view class="tab-bar-border"></view> |
||||
|
<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> |
||||
|
</view> |
@ -0,0 +1,38 @@ |
|||||
|
.tab-bar { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: 48px; |
||||
|
background: white; |
||||
|
display: flex; |
||||
|
padding-bottom: env(safe-area-inset-bottom); |
||||
|
} |
||||
|
|
||||
|
.tab-bar-border { |
||||
|
background-color: rgba(0, 0, 0, 0.33); |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 1px; |
||||
|
transform: scaleY(0.5); |
||||
|
} |
||||
|
|
||||
|
.tab-bar-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.tab-bar-item image { |
||||
|
width: 27px; |
||||
|
height: 27px; |
||||
|
} |
||||
|
|
||||
|
.tab-bar-item view { |
||||
|
font-size: 10px; |
||||
|
} |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 623 B After Width: | Height: | Size: 623 B |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 772 KiB After Width: | Height: | Size: 772 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 618 KiB After Width: | Height: | Size: 618 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 301 KiB After Width: | Height: | Size: 301 KiB |
Before Width: | Height: | Size: 623 B After Width: | Height: | Size: 623 B |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 623 B After Width: | Height: | Size: 623 B |