1.新建tabbar组件
2. wxml组件代码
<view class="tabbar">
<view class="tabbar-item" wx:for="{{ tabs }}" wx:key="{{index}}" bindtap="switchTab" data-index="{{index}}">
<image class="tabbar-item-icon" style="width: 50px;height: 40px;" mode="aspectFit" src="{{item.selected ? item.iconPath : item.selectedIconPath }}" class="{{item.selected ? 'selected' : ''}}"></image>
<view wx:if="{{item.text != ''}}" class="tabbar-item-text" class="{{item.selected ? 'selected' : ''}}">{{item.text}}</view>
</view>
</view>
注意:因为GIF展示会有缓存影响,需要发GIF放到服务器上 并且在后缀加上随机数或者时间戳进行展示
3.js 代码
// components/tabbar/tabbar.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
tabs: [
{
iconPath: 'https://football.web1995.top/images/0-1.gif',
selectedIconPath: 'https://football.web1995.top/images/0-2.gif',
text: '',
selected: true,
pagePath: '/pages/home/index'
},
{
iconPath: 'https://football.web1995.top/images/1-1.gif',
selectedIconPath: 'https://football.web1995.top/images/1-2.gif',
text: '',
selected: false,
pagePath: '/pages/message/index'
},
{
iconPath: 'https://football.web1995.top/images/2-1.gif',
selectedIconPath: 'https://football.web1995.top/images/2-2.gif',
text: '',
selected: false,
pagePath: '/pages/user/index'
},
{
iconPath: 'https://football.web1995.top/images/3-1.gif',
selectedIconPath: 'https://football.web1995.top/images/3-2.gif',
text: '',
selected: false,
pagePath: '/pages/user/index'
},
{
iconPath: 'https://football.web1995.top/images/4-1.gif',
selectedIconPath: 'https://football.web1995.top/images/4-2.gif',
text: '',
selected: false,
pagePath: '/pages/user/index'
}
],
oldTabs: [
{
iconPath: 'https://football.web1995.top/images/0-1.gif',
selectedIconPath: 'https://football.web1995.top/images/0-2.gif',
text: '',
selected: true,
pagePath: '/pages/home/index'
},
{
iconPath: 'https://football.web1995.top/images/1-1.gif',
selectedIconPath: 'https://football.web1995.top/images/1-2.gif',
text: '',
selected: false,
pagePath: '/pages/message/index'
},
{
iconPath: 'https://football.web1995.top/images/2-1.gif',
selectedIconPath: 'https://football.web1995.top/images/2-2.gif',
text: '',
selected: false,
pagePath: '/pages/user/index'
},
{
iconPath: 'https://football.web1995.top/images/3-1.gif',
selectedIconPath: 'https://football.web1995.top/images/3-2.gif',
text: '',
selected: false,
pagePath: '/pages/user/index'
},
{
iconPath: 'https://football.web1995.top/images/4-1.gif',
selectedIconPath: 'https://football.web1995.top/images/4-2.gif',
text: '',
selected: false,
pagePath: '/pages/user/index'
}
],
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
const { index } = e.currentTarget.dataset;
const { tabs, oldTabs } = this.data;
tabs.forEach((item, idx) => {
if (index === idx) {
item.iconPath = oldTabs[idx].iconPath + '?time=' + Math.random();
item.selectedIconPath = oldTabs[idx].selectedIconPath + '?time=' + Math.random();
item.selected = true
} else {
item.selected = false
}
})
this.setData({
tabs
})
}
}
})
有开发问题可以咨询我喔 wx: ai_002