uniapp怎么自定义tabbar |
您所在的位置:网站首页 › uniapp用法 › uniapp怎么自定义tabbar |
uniapp怎么自定义tabbar
发布时间:2023-04-11 16:56:47
来源:亿速云
阅读:75
作者:iii
栏目:开发技术
这篇文章主要讲解了“uniapp怎么自定义tabbar”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“uniapp怎么自定义tabbar”吧! 思路实现思路就是通过通过自定义view来实现我们这个tabbar功能,然后页面通过组件来展示。通过点击不同的tab来显示不同的组件来达到模拟原生tabbar切换效果。那有些人要问了,你咋知道我项目中有多少个tab,这些tab叫什么名字了?那这里就可以利用uniapp提供的组件easycom模式来解决这些问题,只要我们设置好组件的限制个数和提前占位名称,这些问题就迎刃而解。 实现1、我们现在components(没有就新建一个components目录)目录下新建一个文件夹(我这里叫ctab),然后分别新建一个vue组件和一个js文件。组件可以让我们在其他地方引用,js文件主要是做配置。 2、新建tab组件,我们组件最多限制5个tab组件,然后需要通过easycom占位来实现,所以你需要几个tab组件就在components目录下建几个组件命名为ctabx。如下所示,我这里要展示三个tab: 特别注意这里的tab组件命名一定要符合easycom规范,不然可能会引起组件引用错误。 这里示例一个ctab1写法: 首页 export default { name: "ctab1", data() { return {}; }, mounted() {}, methods: {} }3、tabbar组件ctab.vue实现,这里就直接上代码了,直接copy就能使用,关键地方已加上注释 {{midBtn.text}} {{tabs[index {{tabs[index 99 ? '99+' : tabs[index |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |