@ -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 |