微信小程序+vant组件侧边导航栏切换显示

设计页面时希望效果：左侧侧边导航栏，右侧内容。点击左侧导航栏的不同块，右侧显示不同内容。

采用了vant组件中侧边导航栏van-sidebar，van-sidebar子标签包括多个van-sidebar-item

实现方法：

van-sidebar中设置 bind:change="onChange"：

        <van-sidebar  active-key="{{ activeKey }}" bind:change="onChange"><van-sidebar-item title="农家水果" custom-class="cellTab" /><van-sidebar-item title="农家蔬菜" custom-class="cellTab"/><van-sidebar-item title="自种茶叶" custom-class="cellTab"/><van-sidebar-item title="加工零食" custom-class="cellTab"/><van-sidebar-item title="加工饮料" custom-class="cellTab"/><van-sidebar-item title="加工调料" custom-class="cellTab"/></van-sidebar>

随后在js文件中编写onChange（event），其中event.detail即对应导航栏块的索引。以event.detail作switch参数，在case中通过this.setData设置右侧区域内容。

onChange(event) {switch(event.detail){case 0:this.setData({goods:[{price:"5.6元/斤",tag:"热销",title:"农家大橘子",image:"../myImage/orange.webp",value:"5"},{price:"6.6元/斤",tag:"新品",title:"农家大香蕉",image:"../myImage/banana.webp",value:"4"}]});break;case 1:this.setData({goods:[{price:"5.6元/斤",tag:"热销",title:"农家白菜",image:"../myImage/vegetable.webp",value:"5"},{price:"6.6元/斤",tag:"新品",title:"农家西红柿",image:"../myImage/tomato.webp",value:"4"}]})}}

即可实现跳转效果

微信小程序+vant组件侧边导航栏切换显示相关推荐

微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序自定义头部标题导航栏
/*** 微信小程序头部自定义标题导航栏* * 参数:* pageTitle: 导航栏标题,默认不显示* navColor: 导航栏背景颜色,默认白色,透明为'transparent'属性值* noS ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
微信小程序购物车和左侧导航栏
先上实现图话不多说,直接上代码 cars.js // const arr = require("../../utils/data"); // pages/cars/cars.j ...
Taro编译微信小程序实现顶部自定义导航栏
[需求] 使用taro开发微信小程序的过程中,涉及到小程序的需要自定义顶部导航栏(导航栏渐变色),微信小程序中只能够设置固定的颜色,渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 ...

微信小程序+vant组件侧边导航栏切换显示

微信小程序+vant组件侧边导航栏切换显示相关推荐

最新文章

热门文章

微信小程序+vant组件 侧边导航栏切换显示

微信小程序+vant组件 侧边导航栏切换显示相关推荐

最新文章

热门文章

微信小程序+vant组件侧边导航栏切换显示

微信小程序+vant组件侧边导航栏切换显示相关推荐