uniapp 电商app从0到1实战（一）——自定义tabbar组件

灰太狼 2021-07-25 17:01 516阅读 0赞

## 电商App ##

最近公司的电商app一阶段终于结束了，我也终于有时间和精力去总结一下了。（之前不总结，纯粹是因为懒）

### 自定义tab页 ###

看一下UI图：  
![在这里插入图片描述][20200921093007267.png_pic_center]  
明显不是Uniapp框架中的tabbar能够实现的，因此，手写一个tabbar。

#### 自定义tabbar的思路 ####

1.  创建一个组件
2.  定义一个变量tabIndex取值分别是0 1 2 ，代表 首页 收益 我的三个页面。
3.  因为是app，小程序有存储大小的限制，app没有，为了更好的实现tab的切换，因此，将两种状态共计6张tab的图标放在本地的static文件夹中。
4.  uniapp中的image很邪门，不能放置变量去控制展示哪张图片，因此我的写法如下：

点击tabbar时，除了图标的状态改变之外，还需要有页面的改变，因此需要用到toPage这个方法：

toPage(index){ 
    	switch (index) { 
    		case 0:
    			uni.reLaunch({ 
    				url:`/pages/index/index`
    			});
    			break;
    		case 1:
    			uni.reLaunch({ 
    				url:`/pages/profit/profit`
    			});
    			break;
    		case 2:
    			uni.reLaunch({ 
    				url:`/pages/user/user`
    			})
    			break;
    	}
    }

在三个页面中引用tabbar组件的方式如下：

// 引入tabbar组件
    import tabBar from '@/components/tab-bar.vue';
    // 注册组件
    components:{ tabBar},
    // 使用组件
    <tab-bar :tabIndex="0"></tab-bar>
    // 注意每个页面中的tabIndex是不一样的

`uni.reLaunch({url:"/pages/index/index"})` 为了能够将三个页面当成是真正的tab页面，所以不使用`uni.navigateTo`

[20200921093007267.png_pic_center]: /images/20210725/8b195d9d914a42b3b94d10aa82b00110.png