使用vant的 van-tabbar组件的一点心得

以下是官方文档的demo，原谅作为新手的我看了半天没搞懂，后来，经过多次尝试，终于做出来了。记录一下。
Tabbar 标签栏
自定义图标
通过 icon 插槽自定义图标，可以通过 slot-scope 判断标签是否选中。

自定义

我的项目：

<van-tabbar-item
v-for="(item, index) in tabbars"
:key=“index”
@click=“tab(index, item.name)”
>
{{ item.title }}

export default {
data() {
return {
active: 0,
currIndex: 0,
tabbars: [
{
title: ‘首页’,
normal: require(’…/…/assets/images/index.png’),
active: require(’…/…/assets/images/index-yes.png’),
name: ‘/sp_trunk/qa/getDynamicQAs’
},
{
title: ‘提问’,
normal: require(’…/…/assets/images/tiwen-no.png’),
active: require(’…/…/assets/images/tiwen.png’),
name: ‘/AskQuestions’
},
{
title: ‘快问’,
normal: require(’…/…/assets/images/kuaiwen.png’),
active: require(’…/…/assets/images/kuaiwen.png’),
name: ‘/QuickMain’
},
{
title: ‘消息’,
normal: require(’…/…/assets/images/xiaoxi.png’),
active: require(’…/…/assets/images/xiaoxi1.png’),
name: ‘/sp_trunk/chat/getUserNews’
},
{
// name: ‘mine’,
title: ‘我的’,
normal: require(’…/…/assets/images/wode.png’),
active: require(’…/…/assets/images/wode1.png’),
name: ‘/mycontent’
}
]
}
},
methods: {
tab(index, val) {
this.currIndex = index
this.$router.push(val)
}
}

使用vant的 van-tabbar组件的一点心得相关推荐

微信小程序+vant的自定义tabBar
1.目录结构 2.创建custom-tab-bar文件夹 1.在代码根目录下添加入口文件: custom-tab-bar/index.js custom-tab-bar/index.json cust ...
react 自定义 TabBar 组件
1.创建组件 src/components/TabBar/index.js /*** TabBar 组件*/ import React ,{ PureComponent } from 'react' ...
微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
Vant - 高效的 Vue 组件库，再造一个有赞移动商城也不在话下
Vant ( \ˈvænt\ ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant,可以快速搭建出风格统一的页面,提升开发效率.目前已有近 ...
vant在cell中加表格_在vant 中使用cell组件定义图标该图片和位置操作
@本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码 vant 中使用cell组件定义图标该图片和位置像微信信息栏一样二级经营单位 // ...
uni-app 使用 Uview2.x 搭建自定义tabbar组件
先看效果引言我的软件需要后续隐藏导航栏等功能,在开发过程中逐渐意识到uni-app原生的tabbar可能不能满足个人的开发要求,而且uView的兼容性是所有非原生组件库中最好的,所以我以uView ...
自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
Tabbar组件封装
TabBar实现思路 1.如果在下方有一个单独的TabBar组件,你如何封装自定义TabBar组件,在APP中使用让TabBar出于底部,并且设置相关的样式 2.TabBar中显示的内容由外界决定 ...

使用vant的 van-tabbar组件的一点心得

使用vant的 van-tabbar组件的一点心得相关推荐

最新文章

热门文章