vue+vant的Indexbar索引栏的内容加载问题

最新推荐文章于 2024-01-23 18:59:53 发布

我也不想当程序员

最新推荐文章于 2024-01-23 18:59:53 发布

阅读量4.5k

点赞数

文章标签： vue vant 索引栏 Indexbar

本文链接：https://blog.csdn.net/weixin_41060844/article/details/103023781

版权

本文主要介绍了前端新手在使用Vue和Vant搭建H5移动端Demo时遇到的IndexBar内容加载问题。在按照Vant官方文档进行集成时，发现只有标题而无内容。通过分析，发现在IndexBar中缺少Cell组件的引入。解决方案是在适当位置引入Cell组件，从而成功显示列表内容。

摘要由CSDN通过智能技术生成

vant的IndexBar使用问题

- 按照官方的写法引入

前端渣渣第一次使用vant的IndexBar时遇到的问题；根据公司的业务需求，需要做一个移动端的H5demo, 技术选型使用了vue+vant

按照官方的写法引入

这里按照官方的方法引入

// vant的按需加载就不说了
<template>
  <div class="cityList">
    <van-index-bar>
      <van-index-anchor index

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我也不想当程序员

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vant 索引城市不对_vant IndexBar实现的城市列表

weixin_33869754的博客

12-23

479

在开发中有个需求是一个选择城市的列表，看了看做成三级联动好像不是特别方便还是做成一整页可以按导航选取的就可以了话不多说开始上码我用的是vant这个ui框架中的IndexBar组件其实这个组件已经把需要的都弄好了我们只要处理数据就好了首先需要引入IndexBar组件这个就不再赘述了官网写的很清楚点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置...这是vant官方文...

列表内容过多卡顿？有索引栏如何实现滚动加载？

最新发布

typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。

07-31

939

很多小伙伴可能在开发业务中会遇到这种问题，数据列表过多，造成dom一次性渲染卡顿，本文主要介绍滚动加载，实现在有索引栏的列表中使用滚动加载的方法。本文技术栈使用的是vue2+vant2，其他框架组件库也都有相似之处，可以做个参考实现原理其实就是一点一点加入，具体怎么加入，什么时候加入，是实现这个功能的主要点，其他组件库都可以按照类似方法进行实现，欢迎交流！

4 条评论您还未登录，请先登录后发表或查看评论

小程序使用Vant weapp的索引栏IndexBar无法正常跳转至对应锚点且底部异常

01-03

【问题】小程序使用Vant weapp的索引栏IndexBar组件无法正常跳转至对应锚点，且无变色效果，但滚动正常。 Vant UI库是采用dist文件引入的方式导入。按官方demo在xx.json引入组件 van-index-bar: ../../dist/index-bar/index, van-index-anchor: ../../dist/index-anchor/index xx.js文件 // 索引字母数组 const indexList = []; const charCodeOfA = 'A'.charCodeAt('0'); for (let

vant 索引城市不对_Vant IndexBar 索引栏

weixin_30737431的博客

12-23

1078

引入import Vue from 'vue';import { IndexBar, IndexAnchor } from 'vant';Vue.use(IndexBar);Vue.use(IndexAnchor);代码演示基础用法点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置...自定义索引列表可以通过index-list属性自定义展示的索引字符列表，标题1标题2...expor...

微信小程序使用vant-weapp中的索引栏右侧点不动，滚定索引失效问题

紫一的博客

04-15

2644

微信小程序使用vant-weapp中的索引栏右侧点不动，滚定索引失效问题 vant的索引栏只要使用了定位，或者自定义头部，那么vant的索引栏就会出现各种BUG，基本不能用，这里我是基本重新写了一个。先看一下最终效果图：以上就是最终效果图，我尝试了各种方法都没办法在原生的基础上解决问题，所以这里我采用的方法是放弃vant自带的索引，全部用自己的思路重新来做一个类似的功能。 wxml <view id='app'> <navbar pageName="管理系统" textSh

Vant框架中关于IndexBar索引栏的CDN单页面引用，无法正常展示

slice_93的博客

01-29

560

官网方法：但是展示出来是正确方法：单标签，要写成双标签

Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui）.zip

05-03

Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：...

vue3+vite2+ts+vant3 项目demo

04-16

此项目按照大佬文章一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬

Vue+Vant+Typescript实现手机端外卖商城.zip

05-03

Vue+Vant+Typescript实现手机端外卖商城 Vue+Vant+Typescript实现手机端外卖商城 Vue+Vant+Typescript实现手机端外卖商城 Vue+Vant+Typescript实现手机端外卖商城 Vue+Vant+Typescript实现手机端外卖商城 Vue+...

Vue+Vant+SSM图书管理系统设计

03-11

api接口采用技术：Vue(前端框架) + Vant(前端轻量级ui库） + SSM框架，可以升级Springboot 基于Vue图书管理app技术要点： 1 此系统web端接口采用java语言和ssm框架实现,可以升级Springboot 2 客户端和服务器通信...

vant中indexBar索引栏组件-修改侧边的索引

weixin_45837076的博客

01-06

802

indexBar组件的右侧边索引默认A-Z，和左边内容不是一一对应的，而是按照顺序来的，那么会引发一些问题。

微信小程序使用Vant Weapp框架中IndexBar(索引栏)的坑

u014678583的博客

09-14

7938

当van-index-bar 这个组件有wx:if时，不管是在它组件上还是外层包含判断时都会造成索引滚动不了对应的位置，只有去掉wx:if，才可以。这个坑随着你滚动，索引不会跟着修改成当前对应的索引。这个坑真的是太无语了，废话不多说。这个坑我写出来希望帮助更多的人。有什么疑问随时在下方留言，笔者看到会及时回复。列表已经滚动到C了，结果顶部标题栏跟右侧都没有滚动到对应索引上。

有没有vant使用indexBar遇到这种问题的

luminousqui的博客

12-20

1474

使用vant的bug

微信小程序使用Vant Weapp框架中IndexBar索引栏字母不动问题

紫一的博客

04-09

1658

wxml <view wx:if="{{hasUserInfo}}"> <navbar page-name="页签标题"></navbar> <van-transition custom-class="hellow-block" show="{{ hellowShow }}" name="fade-down"> {{ isNow }}好：{{ userInfo.nickName }}</van-transition> <v

微信小程序vant-indexBar 无反应解决方法

Xc_Wl的博客

01-23

777

如图：点击旁边索引不跳到相对应的字母。

vant 实现IndexBar 索引栏

qq_41818857的博客

11-10

6410

1、效果图如下： 2、数据格式化前后对比格式化之前(即一般后台请求的数据) 格式化之后，将数据按开头字母进行分类 3、数据格式化的方法 let cityName = {}; //循环26个字母的数组 this.FirstPin.forEach(item => { cityName[item] = []; cities.forEach(el => { //对比开头字母是否对应 let first = el.pinyin.sub

Vant IndexBar 在小程序中的简单使用

软件老王

09-19

1730

这篇文章是老王的朋友超超提供的，上午已经更新到原创微信公众号「软件老王」，链接，欢迎各位朋友关注老王的原创公号！先看下最终效果图，主要是渲染一个A - Z 的通讯录。同样的，如果你要做的是城市列表，也可以参考一下。这边是 Vant IndexBar 官方文档方便你查阅。之前的通讯录只是一个列表，名字没有顺序，查找起来不太方便，正好看到Vant组件库里有IndexBar这个组件，所以就立马换掉了，总的来说有以下两个步骤。 1. 格式化数据一开始，后台给我的数据是这样的，而我只想要一个包含名字

在vue+vant+ts框架中

07-17

在 Vue + Vant + TypeScript 框架中，`Toast` 是 Vant 组件库中的一个弹出提示组件，用于展示简短的提示信息。根据你提供的代码，可能是因为 `Toast` 的使用方式不正确导致报错。首先，确保你已经正确导入并注册了 Vant 组件库。在 Vue 组件中，可以通过以下方式导入和注册 Vant 组件： ```typescript import { Toast } from 'vant'; export default { // ... components: { Toast, }, // ... }; ``` 然后，确认 `onChange` 方法的参数类型和使用方式是否正确。根据你的代码，`onChange` 方法接收一个 `index` 参数，你可以尝试将其类型定义为 `number`： ```typescript const onChange = (index: number) => { Toast(`标签 ${index}`); }; ``` 如果你仍然遇到报错，请提供完整的代码和报错信息，我会尽力帮助你解决问题。