微信小程序 自定义GIF tabbar 底部导航栏

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