快速学会自定义组件做taBar导航栏,解决点击闪屏

慢慢相遇 慢慢相识 慢慢拥抱 慢慢相处 慢慢在一起 慢慢一起走 喜欢才不是随随便便就可以开始

和结束的事情 这世界太快 我想和你慢慢来再久一点.

自定义taBar导航栏目的在于我们可以可以更好的拥有样式控制，更好的满足交互上的动效；这是我们的学习的初心，总结下目前有几种方式可以自定义导航

1.直接在index页面写导航，随后使用v-if条件判断切换；优点：上手最快没有什么顾虑，缺点：inex页面代码很长

2.custom-tab-bar官方接口，该方式有利于提升性能，同时可以使用原生taBar的所有接口，优点：可以满足自己的一些样式定制，缺点：无法支持SVG，GIF等格式，和原生一样需要在pages.json文件中配置

3.组件是完全自定义，自行控制样式和图片甚至任何操作；缺点：点击的时候会一闪一闪的

快速定义组件

来自codezzen大佬提供一个代码段学习，定义组件只需要在component目录下建立vue文件（建议插件名字和vue文件名字是一致的）

//例如 component/fr-tabar/fr-tabar.vue

随后文件中需要包含name和props ，即可完成一个组件的建立

//组件名字 name:'fr-tabar', //定义组件参数 props:{ inexActive:{ type:Number,//定义参数类型 default:0 //定义参数默认默认值 } }

组件界面完整代码

<template> <view class=""> <view class="fr-taber"> <view class="fr-taber-view" > <block v-for="(tars ,index) in tarList" :key="index"> <view class="fr-taber-icon" @tap="frTaBar(index,tars.rout)"> <image class="fengrui-img" :src="inxexActive%20==%20index%20?%20tars.icon_active%20:%20tars.icon%20" mode="widthFix"></image> </view> </block> </view> </view> </view> </template> ​ <script> export default { name: "fr-tabar",//组件名字 //组件的参数 props: { // 检测类型 // 文本 inxexActive: { type: Number, default: 0, }, }, data() { return { title: 'Hello', tarList:[ { title:'首页', icon:'../../static/tabar/home.png', icon_active:'../../static/tabar/home_h.png', rout:'../../pages/index/index' }, { title:'专题', icon:'../../static/tabar/catelog.png', icon_active:'../../static/tabar/catelog_h.png', rout:'../../pages/car/car' }, { title:'搜索', icon:'../../static/tabar/res.png', icon_active:'../../static/tabar/res_h.png', rout:'../../pages/search/search' } ] } }, onLoad() { }, methods: { frTaBar(e,l){ let tar_rout = l; uni.switchTab({ url: tar_rout }); } } } </script> ​ <style> .fengrui-img{ height: 100%; width: 100%; } .fr-taber-icon { height: 56upx; width: 56upx; border: 1px solid red; } ​ .fr-taber-list {} ​ .fr-taber-view { background-color: #f3f3f3; border-radius: 200upx; height: 80upx; width: 76%; margin: auto; display: flex; justify-content: space-around; align-items: center; padding: 0upx 20upx; } ​ .fr-taber { width: 100%; position: fixed; bottom: 40upx; height: auto; } </style> ​ ​

自定义tabar

这里提到是的是开头说的第三种方式，自己写组件自己写样式；但是但是点击的时候会闪一下屏幕，目前的解决方式是在pages.json中配置tabar界面 随后定义导航，这样就可以解决页面闪烁问题。坑永远是跳不出去的，tabr的上的图片会闪烁一次 第二次者不会；

此外因为在pages.json中配置了就得使用uni.switchTab跳转，该跳转无法支持参数；我们就得在固定写死inxexActive

总结

本文文章适合学习一下最简单的组件封装和定义tabar基础，若在项目上使用得多测试

完整代码下载

https://yinfengrui.lanzouw.com/i042a2d

封面模版下载

https://banner.frbkw.com