自定义tabbar

一:

在这里配置true,则会找根目录下的文件,作为路由渲染到每个tabbar页面下.原本是默认情况,自定义内部路由,放到每个tabbar页面下.

二:

上面做到了,每个tabbar页面的底部都是这个组件.

三:

Tabbar 标签栏 - Vant Weapp (youzan.github.io)

使用组件库,配置组件内容.

复制代码
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item info="3">
    <image
      slot="icon"
      src="{{ icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    自定义
  </van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

我们如果不写上述,则只是icon不变的,但是点击的时候会变色.van-tabbar内部active会使得变色,哪个选中.但是选中的时候需要不同的图表用上述,slot:icon会在不选中显示.

上面做到了,每个tabbar页面都i有这个组件,以及这个组件上自定义样式.选中图表.

四:

不是自定义的情况下,不能图表上有数字.自定义可以的.

var后面是默认的,没有这个变量下的时候是我们因为如果图标上加数字,会超出tabbar的高度,因此我们使得这个间距为0,设置变量.

这个组件,组件设置变量.这个组件时vant组件库内,因此我们是在引用它的组件内,需要修改

添加info添加右标数字.在list内,只有info时空字符串/不写,才不显示,0也会显示.

五:

上面做到了,每个tabbar都有该组件,每次点击选中与否都会不同,点击的时候修改active.

1)点击不同时,需要页面跳转.

我们需要将active放到store内,这样才不会错乱.如果放到组件内,组件重新加载,还是默认值.

点击的时候,执行事件,事件内能够修改active,以及跳转到对应路径.

完成了,每个页面都有组件,以及点击不同的标时,会跳转以及不同的显示图标,以及图标上有数字的.

但是对于默认的而言没办法做到,如果不是点击到tabbar页面,则active错乱的.但是默认的,不是点击,也会设置对应的active.

在van-tabbar标签上,写这些属性,active-color,会当选中和不选中时设置不同的颜色.

我们设置active的时候,它会设置这些颜色.点击的时候啥也没有,但是active对应的会设置相应的颜色.

相关推荐
ReturnTrue8682 分钟前
nginx性能优化之Gzip
前端
华仔啊4 分钟前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮35 分钟前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
w_y_fan1 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇1 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort1 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手1 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码1 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码1 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
南雨北斗1 小时前
VS Code 中手动和直接运行TS代码
前端