小程序 TabBar 定制

Posted 2021-01-03 SunLemon

使用微信小程序开发时，用到了其 API - tabBar，设置如下（详细的内容可以参考官网 api）：

"tabBar": {
        "color": "#999",
        "selectedColor": "#f04848",
        "backgroundColor": "#ffffff",
        "borderStyle": "black",
        "list": [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/shouye.png",
            "selectedIconPath": "images/shouyeActive.png"
        }, {
            "pagePath": "pages/myWelfare/myWelfare",
            "text": "我的",
            "iconPath": "images/wode.png",
            "selectedIconPath": "images/wodeActive.png"
        }]
    }

预览发现，页面下方的图标和文字大小、间距等无法改变。为了优化用户体验，决定使用自定义组件。

组件代码结构如下：

tabBar.js是组件的业务逻辑代码：

Component({
    // 组件属性
    properties: {
        // 是否是首页
        cur: Number
    },

    // 初始化数据
    data: {
        list: [{
            img: "./icon/shouye.png",
            imgh: "./icon/shouyeActive.png",
            name: "首页",
            link: \'/pages/index/index\'
        }, {
            img: "./icon/wode.png",
            imgh: "./icon/wodeActive.png",
            name: "我的",
            link: "/pages/myWelfare/myWelfare"
        }]
    },

    // 组件方法
    methods: {
        runTo(e) {
            let link = e.currentTarget.dataset.link;
            wx.redirectTo({
                url: link
            })
        }
    }
})

tabBar.wxml是页面模板：

<view class=\'content\'>
    <view wx:for="{{list}}" wx:key="{{index}}"
    class="tab-bar {{cur == index ? \'cur\':\'\'}}"
    bindtap="runTo" data-link="{{item.link}}">
        <image src="{{cur == index ?item.imgh:item.img}}"></image>
        <view><text>{{item.name}}</text></view>
    </view>
</view>

修改之后的效果如下：