Vant-Sidebar 侧边导航，使用for循环下标都为0bug。

最新推荐文章于 2023-06-21 14:26:30 发布
最新推荐文章于 2023-06-21 14:26:30 发布
阅读量1.1k 收藏 4
点赞数 1
分类专栏： 小程序 文章标签： 微信公众平台 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49200545/article/details/125935504
版权

Vant-Sidebar 侧边导航

侧边导航栏官网

错误使用

在这里插入图片描述

在这里插入图片描述
这两张图可以看到，当在van-sidebar里使用 wx:for时会出现循环出来的子项的下标（activeKey）都是相同的。

正确写法

应该在van-sidebar层下再包一个 view 标签 wx:for 写在 view 标签中

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

沐千熏
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
sidebar侧边导航的基础使用
qq_69892545的博客
01-03 4685
3.右边布局，利用onchange监听索引事件，当点击是把对应的索引赋值给对应的数据，实现页面把不同数据切换，1.利用Layout 组件提供了。2.获取数据遍历导航栏文字。
vant侧边导航栏SideBar
最新发布
07-03
vant侧边导航栏SideBar
Vant UI的Sidebar侧边导航组件单独设置滚动条
m0_37922443的博客
07-05 6310
需要实现的效果是：左侧导航栏有单独的滚动条，右侧主体内容也有单独的滚动条，互不干涉。
给vant侧边导航＜van-sidebat＞添加小图标
weixin_40252368的博客
06-21 1229
最近想优化一下自己做的功能小界面，于是盯上了侧边导航栏的样式。这个vant组件的侧边导航栏，默认不支持添加图标的功能，只能自己强行添加，所以这个方法也适用于其他需要添加图标的地方。优化前优化后这里记录一下处理方法。提示：以下是本篇文章正文内容，下面案例可供参考这个方法适用于所有组件，但是因为要操作DOM，所以不建议大量使用，会影响效率。
vue侧边栏导航，右侧显示对应内容
热门推荐
weixin_42429288的1博客
10-30 8万+
最终效果 点击下一个导航，上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由 3.在components中新建组件 3.1 age...
修改Vant组件库NavBar 导航栏的样式
h360583690的博客
10-28 8927
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotli..
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
vant-mall-tpl:vant-ui商城模板
05-15
"vant-mall-tpl:vant-ui商城模板" 是一个基于Vant UI的电子商务网站模板，专为快速构建前端商场界面而设计。这个模板利用了Vant UI组件库，提供了丰富的UI元素和交互设计，帮助开发者高效地搭建功能完备、美观的...
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
使用了vant-ui里的 List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin...
vant-demo：vant演示集
02-04
Vant官方示例合集，包含了Vant，Vant Weapp和Vant Cli相关的示例，详细内容请打开各目录查看。 目录结构 ├── vant # Vant 相关示例 │ ├── vue2 使用 Vue 2、Vant 2、Vue Cli 搭建应用 │ ├── vue3 使用 ...
记录微信小程序使用Vant Weapp-Sidebar 侧边导航，更改它的边框颜色
花花世界的博客
04-11 2714
【代码】记录微信小程序使用Vant Weapp-Sidebar 侧边导航，更改它的边框颜色。
Vant中Sidebar 侧边导航的菜单与路由不一致
melissaomy的博客
03-02 758
vant
微信小程序vantweapp自定义侧边栏
程序员三木的博客
06-05 3603
<van-sidebar active-key="{{ activeID }}" bind:change="changeActiveId"> <block wx:for="{{menu}}" wx:key="menu"> <van-sidebar-item data-id="{{item.id}}" > <view slot='title'> <p> {{...
vue和vant侧边导航组件实现左右联动
m0_56164131的博客
11-26 5080
const moban = { delimiters: ['{{', '}}'], props: [], name: "moban", template: ` <div id="moban" style="background: #F9F8F8;"> <div style="display:flex;"> <div style="width:30%;"> <van-sidebar v-model="activeKe.
侧边导航如何联动页面内容
zc_123_的博客
04-12 288
侧边导航如何联动页面内容（实现导航栏控制页面内容，页面内容联动侧边导航）
vant使用导盲
封景的博客
04-29 488
vue2+vant===移动端开发 vue加vant轻松实现移动端开发
基于Vant实现商品分类左右联动
weixin_41234837的博客
10-20 4708
1.效果图 说明：点击左边导航栏，右边导航栏自动滑动至相应点击的内容； 滑动右边的导航栏，左边导航栏自动滑动至点击的内容； 2.代码展示 基于Vant商品分类左右联动 内容 {{ index }} ...
侧边栏导航布局的实现
用于记录、查询和分享
09-06 2893
代码： /** * Created on 2017/8/4. * 继承自View的自定义View，SideBar * 主要实现3个方面： * 1.重写Draw方法，定制如何去画出字母表 * 2.重写dispatchTouchEvent方法，定制在接收到不同的事件时，如何去做UI响应 * 3.设置接口，用于实现外部RecyclerView的响应 */ public class Si
Vue实现左边导航栏，右边显示对应内容
Otto的学习笔记
05-03 1万+
使用嵌套路由实现 这里重点要注意使用<router-view></router-view> ，路由出口, 路由匹配到的组件将渲染在这里 导航栏代码userInfo.vue： <template> <el-row type="flex" justify="center" :gutter="8"> <el-col v-if="user" :span="20"> <el-col :span="4">
uniapp使用Vant-weapp
05-24
Uniapp 是一个基于 Vue.js 的跨平台开发框架，可以用它来快速构建小程序、H5、App 等多个平台的应用。而 Vant-weapp 是一款基于微信小程序的 UI 组件库，提供了丰富的组件和样式，可以大大提升开发效率。 在 Uniapp 中使用 Vant-weapp，需要先将 Vant-weapp 中的组件转化为 Uniapp 中的组件。具体步骤如下： 1. 安装 Vant-weapp 可以通过 npm 或者下载源代码的方式安装 Vant-weapp。这里以 npm 安装为例： ``` npm i vant-weapp -S --production ``` 2. 将 Vant-weapp 转化为 Uniapp 组件 Uniapp 的组件和微信小程序的组件略有不同，需要将 Vant-weapp 中的组件转化为 Uniapp 中的组件。可以使用 `mpvue-entry` 工具来实现： ``` npm i mpvue-entry -D ``` 然后在 `build` 目录下创建一个 `mpvue.config.js` 文件，将以下代码复制进去： ```js const MpvueEntry = require('mpvue-entry') module.exports = { pages: MpvueEntry.getEntry('src/pages/**/*.vue') } ``` 这样就可以将 Vant-weapp 中的组件转化为 Uniapp 中的组件了。 3. 在页面中使用 Vant-weapp 组件 在页面中引入 Vant-weapp 组件时，需要在 `script` 标签中使用 `import` 引入： ```html <template> <!-- 这里使用 Vant-weapp 的搜索框组件 --> <van-search /> </template> <script> import { VanSearch } from 'vant-weapp' export default { components: { VanSearch } } </script> ``` 这样就可以在 Uniapp 中使用 Vant-weapp 组件了。需要注意的是，在使用 Vant-weapp 组件时，需要将组件名从 `van-` 前缀改为 `Van`，例如 `van-search` 改为 `VanSearch`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值