Vant框架中关于IndexBar索引栏的CDN单页面引用攻略

最新推荐文章于 2023-07-02 17:14:03 发布
最新推荐文章于 2023-07-02 17:14:03 发布
阅读量2.3k 收藏 6
点赞数 2
分类专栏： 前端 文章标签： vue.js html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NuoYan3327/article/details/105077190
版权

关于Vant框架中IndexBar索引栏以CDN的方式单页面引用攻略

      在使用vant时因为很多官方示例以及文档对于某些可能出现的错误并没有说详细说明，这里也是踩了很多的坑。因为平时都是单页面引用并不需要以脚手架的形式创建应用，所以实际上遇到的问题会更多！

      如果你也是通过CDN方式引用的vant框架时首先你需要注意一个很特别的问题点，在很多官方示例中给出的代码大部分都是单标签的形式存在，这种方式在CLI项目中确实不会存在问题，但是当你尝试把一段官方示例代码粘贴到H5页面中调用时你可能会发现内容显示不完全或者样式行为不正常等情况，不要以为是官方代码有问题2333 其实解决的方法很简单~尝试把所有单标签替换成双标签例如：

      可以从官方示例和本地结果看出最终效果明显有问题，原因之前也说过了，此时我们再把单标签替换成双标签后就会正常显示了：

      至此终于是解决了第一个坑了，但福如双至 祸不单行，紧接着在使用索引栏时我又遇到了另一个问题：单击右侧索引栏时无法正常跳转到对应锚点！

      在我正确的了解到了写法时完整的写完一个索引栏后却遇到了单击右侧索引栏无法跳转的问题

     此时单击右侧索引栏是不会有任何反应的但是滑动是正常的，之前一直以为是需要编写一个方法来触发，看了官方文档后才发现了这个东西：

      因为这里是自己提供的自定义数据，所以此时生成的标题头并没有绑定对应的index参数！因为官方示例中没有绑定index-list，所以他其实默认的值就是A-Z，当时当你绑定自己的index-list时就必须在IndexAnchor中手动绑定一次index，绑定完毕后就可以正常使用了：

     最后问题就得以解决了！美汁汁~

 

三分妄想
关注
专栏目录
vant中IndexBar 索引栏自定义索引列表
YHLQ的博客
12-23 2153
通过index-list属性自定义展示的索引字段 父组件：search.vue <template> <div> <searchHeader></searchHeader> <searchList :mCities="Cities"></searchList> </div> </template> <script> import sear
vue+vant的Indexbar索引栏的内容加载问题
weixin_41060844的博客
11-12 4529
vant的IndexBar使用问题按照官方的写法引入 前端渣渣第一次使用vant的IndexBar时遇到的问题；根据公司的业务需求，需要做一个移动端的H5demo, 技术选型使用了vue+vant 按照官方的写法引入 // vant的按需加载就不说了 <template> <div class="cityList"> <van-index-bar>...
单页面cnd 引入 vant+vue+h5 应用vant
weixin_44057084的博客
04-22 2114
@[TOC] h5 Vue CND 引入vant 并使用 废话不多说上代码 使用 请注意引入对应的vant 版本及JS，否则vant 组件会异常显示 <head> <meta charset="utf-8"> <title>h5 vue vant </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta nam
Vant使用IndexBar索引栏
明知山
01-15 3462
数据类型是二维数组 <template> <div> <van-index-bar :index-list="indexList"> <div v-for="(item,index) in peopleList" :key="index"> <van-index-anchor :index="item.index" /> <div class="cell" v-for="(row,in.
vant框架cdn使用方式的简短案例
两天打鱼三天晒网
08-03 7726
vant框架主页：https://youzan.github.io/vant/#/zh-CN/intro cdn方式引用的简易例子： <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, ...
vant 实现IndexBar 索引栏
qq_41818857的博客
11-10 6402
1、效果图如下： 2、数据格式化前后对比 格式化之前(即一般后台请求的数据) 格式化之后，将数据按开头字母进行分类 3、数据格式化的方法 let cityName = {}; //循环26个字母的数组 this.FirstPin.forEach(item => { cityName[item] = []; cities.forEach(el => { //对比开头字母是否对应 let first = el.pinyin.sub
1. 创建一个vue实例
洪布斯的博客
12-26 620
vue.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
cdn引入vant的toast轻提示和dialog弹出框的使用
qq_44427336的博客
05-09 516
vant官方提供的写法在vue中会一直报错。
小程序使用Vant weapp的索引栏IndexBar无法正常跳转至对应锚点且底部异常
01-03
小程序使用Vant weapp的索引栏IndexBar组件无法正常跳转至对应锚点，且无变色效果，但滚动正常。 Vant UI库是采用dist文件引入的方式导入。 按官方demo在xx.json引入组件 van-index-bar: ../../dist/index-bar/...
微信小程序使用vant-weapp IndexBar 自定义索引栏
我的博客
04-28 7278
vant-weapp IndexBar组件可实现点击索引栏时，自动跳转到对应的IndexAnchor锚点位置。 演示 点击索引栏时可快速跳转到该栏对应的锚点位置。 代码 index.wxml <van-index-bar index-list="{{ indexList }}" scroll-top="{{ scrollTop }}"> <van-index-anc...
vue3如何使用vant中IndexBar索引栏？
最新发布
Zhang_wang_yun的博客
07-02 3075
在我们开发移动端的时候，有时候会遇到制作通讯录或者城市索引栏，这种时候我们就可以使用vant中快捷方便的IndexBar索引栏来完成这个功能。
Vant引入CDN实现图片懒加载
明知山
05-27 1437
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https:/
通过cdn引入vant，van-swipe-cell没有效果
扮老虎的猪
06-03 2665
前言 最近接手一个项目，是h5多页面，页面中使用了vant的一些插件，是通过cdn的方式引入样式和js的。使用
使用cdn实现Vue+Vant
qq_51249969的博客
04-19 1130
【代码】使用cdn实现Vue+Vant。
Vant项目优化，由按需引入到优CDN引入优化时出现的问题
helgeal的博客
11-25 1935
Vant项目优化，由按需引入到优CDN引入优化时出现的问题
vue按需引入vant
找师父的小白的博客
04-18 175
按需引入vant
vant cdn引用 轮播图Swipe data数据使用
菜鸟技术员
12-26 845
最近在使用vant框架，因为不懂vue，所以直接cdn引用了，说起来vant框架的文档真的对于新手很不友好，只写了一些大概的方法，想要按照文档进行项目，真的很难（也可能个人不会vue的原因？）。 再就是找不到一起交流的人，只能在网上提问，但是效率真的好低。。。哎。 探究了几天慢慢的摸索了一下，最终实现了一些效果。做个备注，以及让新手做个参考吧。 下面的内容为页面引用框架的轮播的效果，官方的轮播图只有效果，但是却没有连接，搜索了半天也没有找到怎么给轮播图做链接，后来根据网上的list组件以及vue等其他的方法
CDN模式使用vant组件 引入之后调用不了组件
qq_36546490的博客
07-11 1150
cdn使用vant
H5 引入vue、vant组件开发
Peanutfight的博客
05-19 5118
文章目录一、定义初始架构公共资源下载二、引入vue三、引入axios四、引入vant五、其他1. md5.js2.适配移动端开发 flexible + rem 一、定义初始架构 web-vue --images // 放置静态图片 --js // js文件 --common // 引入公共js文件 --http.js // 封装的axios请求 --style // css文件 --common // 引入公共css文件 --web.html // 主页面
vant组件库中的索引栏，那个indexList如何在不变动的情况加添加
05-26
如果你想在索引栏中添加一个不变动的项，可以在 `index-list` 组件中添加一个 `index` 数组，然后在这个数组中添加你需要的项即可。这个数组中的每个元素会对应一个索引栏的项，而且这些项是不可变的。 例如，你可以这样定义一个 `index` 数组： ```js index: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] ``` 然后将这个数组传递给 `index-list` 组件的 `index` 属性： ```html <van-index-list :index="index"> <!-- 索引栏的内容 --> </van-index-list> ``` 这样就会在索引栏中添加一个包含 A-G 的固定项。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值