vant-tabbar点击跳转页面

### 使用 Vant Tabbar 实现点击跳转功能 在微信小程序开发中，利用 `Vant` 提供的 `Tabbar` 和 `TabbarItem` 组件可以轻松实现底部导航栏，并支持页面间的跳转。以下是具体实现方式： #### 自定义 Tabbar 配置 为了使 Tabbar 支持动态切换和页面跳转，需先配置自定义组件接管默认的 Tabbar 渲染逻辑。 ##### WXML 文件 (custom-tab-bar/index.wxml) ```html <van-tabbar active="{{ active }}" bind:change="onChange"> <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}"> {{item.text}} </van-tabbar-item> </van-tabbar> ``` 上述代码展示了如何通过循环渲染多个 Tabbar Item 并绑定 `bind:change` 方法来监听用户的点击行为[^1]。 ##### JS 文件 (custom-tab-bar/index.js) ```javascript Component({ data: { active: 0, list: [ { text: '首页', icon: 'home-o' }, { text: '分类', icon: 'apps-o' }, { text: '购物车', icon: 'cart-o' }, { text: '我的', icon: 'user-o' } ] }, methods: { onChange(event) { const index = event.detail; this.setData({ active: index }); // 获取目标路径并执行页面跳转 const pages = ['pages/home/home', 'pages/category/category', 'pages/cart/cart', 'pages/user/user']; const url = pages[index]; wx.switchTab({ url }); // 切换到对应 tab 页面 } } }); ``` 此部分实现了当用户点击某个 Tabbar Item 后触发 `onChange` 函数，函数内部会更新当前激活项索引 (`active`) 并调用 `wx.switchTab` 完成页面跳转。 #### 动态图标显示 如果希望在选中状态时更换图标样式，则可以通过判断 `active` 属性的状态来进行调整。 ##### 修改后的 WXML 文件 ```html <van-tabbar active="{{ active }}" bind:change="onChange"> <block wx:for="{{ list }}" wx:key="index"> <van-tabbar-item custom-class="tabbar-item" info="{{ item.info || '' }}" dot="{{ !!item.dot }}" badge="{{ item.badge || null }}" @click="onItemClick(index)"> <!-- 图标 --> <view slot="icon" class="slot-icon"> <image src="{{ item.activeIcon ? item.activeIcon : item.icon }}"></image> </view> <!-- 文本 --> <text>{{ item.text }}</text> </van-tabbar-item> </block> </van-tabbar> ``` 此处引入了新的属性 `@click` 来捕获单击事件，并允许开发者更灵活地控制图标的加载逻辑[^2]。 ##### 更新后的数据结构 ```javascript data: { active: 0, list: [ { text: '首页', icon: '/images/tab_home.png', activeIcon: '/images/tab_home_active.png' }, { text: '分类', icon: '/images/tab_category.png', activeIcon: '/images/tab_category_active.png' }, { text: '购物车', icon: '/images/tab_cart.png', activeIcon: '/images/tab_cart_active.png' }, { text: '我的', icon: '/images/tab_user.png', activeIcon: '/images/tab_user_active.png' } ] } ``` 以上修改使得每个选项卡都可以拥有独立的未选中与已选中的图片资源链接。 --- ### 总结 综上所述，在微信小程序项目里借助于 `Vant Weapp` 中的 `Tabbar` 及其子组件能够快速搭建起具备交互能力的应用底边菜单条；同时配合小程序 API 如 `switchTab()` 即可达成跨页浏览的需求[^1]。