3.使用uView让tabbar更优雅

文章目录

1. 使用uView让tabbar更优雅
- 1.1. 怎么才优雅？
- 1.2. uView的tabbar合适吗？
- 1.3. 引入项目过程
- - 1.3.1. 修改pages.json
  - 1.3.2. 把demo里面的pages先拷贝过来
  - 1.3.3. 引入tabbar的图片
  - 1.3.4. 运行
- 1.4. 我们自己的项目适配

1. 使用uView让tabbar更优雅

1.1. 怎么才优雅？

为什么要做这个呢？起因还是因为我们自己做的tabbar都平平淡淡，没什么特色，然而，我们有时候看到有的小程序的tabbar，中间突出很大一块，是怎么做到的呢？

1.2. uView的tabbar合适吗？

tabbar底部导航栏：https://vkuviewdoc.fsq.pub/components/tabbar.html
对应的demo：https://vkuviewdoc.fsq.pub/components/resource.html

动手下载运行起来看看效果：

效果还是非常好的，那就开始搞吧

1.3. 引入项目过程

1.3.1. 修改pages.json

主要就是改pages配置，把tabbar定义一下

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages// {// 	"path": "pages/index/index",// 	"style": {// 		"navigationBarTitleText": "uni-app"// 	}// }// uView的自定义tabbar demo{"path": "pages/index/index","style": {"navigationBarTitleText": "uView UI"}},{"path": "pages/js/index","style": {"navigationBarTitleText": "工具"}},{"path": "pages/template/index","style": {"navigationBarTitleText": "模板"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {},// uView的自定义tabbar demo，定义tabbar"tabBar": {"color": "#909399","selectedColor": "#303133","backgroundColor": "#FFFFFF","borderStyle": "black","list": [{"pagePath": "pages/index/index","iconPath": "static/uview/example/component.png","selectedIconPath": "static/uview/example/component_select.png","text": "组件"},{"pagePath": "pages/js/index","iconPath": "static/uview/example/js.png","selectedIconPath": "static/uview/example/js_select.png","text": "工具"},{"pagePath": "pages/template/index","iconPath": "static/uview/example/template.png","selectedIconPath": "static/uview/example/template_select.png","text": "模板"}]}
}

1.3.2. 把demo里面的pages先拷贝过来

先拷贝，后面再删，主要是先运行起来。

其实也就是拷贝了3个文件，也没什么特别，好操作。

1.3.3. 引入tabbar的图片

同样，还是先拷贝过来，后面会改成我们自己的tabbar的图标。

把demo里的static/uview文件夹都拷贝过来。

1.3.4. 运行

就这么多，运行起来就是那样的效果：

1.4. 我们自己的项目适配

还是按照之前的套路：

pages.json修改

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/bill_add/bill_add","style": {"navigationBarTitleText": "记一笔"}},{"path": "pages/bill_list/bill_list","style": {"navigationBarTitleText": "账单"}},{"path": "pages/bill_chat/bill_chat","style": {"navigationBarTitleText": "图表"}},{"path": "pages/bill_detail/bill_detail","style": {"navigationBarTitleText": "明细"}},{"path": "pages/my/my","style": {"navigationBarTitleText": "我的"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {},// uView的自定义tabbar demo，定义tabbar"tabBar": {"color": "#909399","selectedColor": "#303133","backgroundColor": "#FFFFFF","borderStyle": "black","list": [{"iconPath": "/static/tab-bar/账单.png","selectedIconPath": "/static/tab-bar/账单_h.png","text": "账单","pagePath": "pages/bill_list/bill_list"},{"iconPath": "/static/tab-bar/图表.png","selectedIconPath": "/static/tab-bar/图表_h.png","text": "图表","pagePath": "pages/bill_chat/bill_chat"},{"iconPath": "/static/tab-bar/记账.png","selectedIconPath": "/static/tab-bar/记账_h.png","text": "记账","pagePath": "pages/bill_add/bill_add"},{"iconPath": "/static/tab-bar/明细.png","selectedIconPath": "/static/tab-bar/明细_h.png","text": "账单","pagePath": "pages/bill_detail/bill_detail"},{"iconPath": "/static/tab-bar/我的.png","selectedIconPath": "/static/tab-bar/我的_h.png","text": "我的","pagePath": "pages/my/my"}]}
}