自定义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对应的会设置相应的颜色.

相关推荐
excel1 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼1 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手5 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法5 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku5 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode5 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu5 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu5 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu5 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu5 小时前
【js篇】call() 与 apply()深度对比
前端·javascript