vant组件indexbar索引--做城市列表出现的问题

最新推荐文章于 2024-06-03 14:24:32 发布
最新推荐文章于 2024-06-03 14:24:32 发布
阅读量1.1w 收藏 5
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30424359/article/details/97396570
版权

项目需求正解：点击右边索引对应左边的城市会自动滑到顶部
在这里插入图片描述
当点击Z的时候会出现个问题
在这里插入图片描述
Z对应的城市没显示出来。如果只给左边城市列表加一个marginbottom的话，此时点击Z会显示对应的城市，但是滑动左边的成列表底部会出现一片空白
在这里插入图片描述在这里插入图片描述
最后想到了解决的办法。点击索引加marginbottom，触摸滑动时不加marginbottom。此时问题就解决了（下附代码）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

沉迷前端的白
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
vue+vant的Indexbar索引栏的内容加载问题
weixin_41060844的博客
11-12 4420
vant的IndexBar使用问题按照官方的写法引入 前端渣渣第一次使用vant的IndexBar时遇到的问题；根据公司的业务需求，需要做一个移动端的H5demo, 技术选型使用了vue+vant 按照官方的写法引入 // vant的按需加载就不说了 <template> <div class="cityList"> <van-index-bar>...
小程序使用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
vue3+vant4 二次封装IndexBar城市列表组件以及性能优化
最新发布
HaushoLin的博客
06-03 575
二次封装城市列表以及对静态资源的引入做异步引入优化。
vant-weap 小程序 indexBar索引栏右侧无法点击切换
weixin_43886206的博客
03-02 1975
如题在weap文档上的indexBar是可以点击右侧切换对应索引内容 但是在小程序上无法点击切换, 在网上找了一下发现没有解决这个问题的方法 如此 我就只能看weap小程序源码了 问题所在: 类型不一致 String === Number 在index-bar.js中找到scrollToAnchor函数 scrollToAnchor: function (index) { ...
微信小程序 使用Vant Weapp框架中IndexBar(索引栏)的坑
u014678583的博客
09-14 7812
当van-index-bar 这个组件有wx:if时，不管是在它组件上还是外层包含判断时都会造成索引滚动不了对应的位置，只有去掉wx:if，才可以。这个坑随着你滚动，索引不会跟着修改成当前对应的索引。这个坑真的是太无语了，废话不多说。这个坑我写出来希望帮助更多的人。有什么疑问随时在下方留言，笔者看到会及时回复。列表已经滚动到C了，结果顶部标题栏跟右侧都没有滚动到对应索引上。
Vant UI的index-bar( 索引栏 )组件中的anchor元素固定定位在Tab( 标签 )组件下失效的原因记录
CSDN_Sviexu的博客
12-09 1962
在用vant ui制作联系人列表的时候,在vant-tab组件下引用vant-index-bar组将, 发现index-anchor会跟随父元素一起滚动, 于是检查了anchor的样式 .van-index-bar__sidebar { position: fixed; top: 50%; right: 0; z-index: 2; display: flex; -webkit-box-orient: vertical; -webkit-box-d
Vant中 索引栏（IndexBar）自定义使用
明天也要努力的博客
01-18 6152
1. 索引栏（IndexBar ）自定义使用 传送门：Vue中 引入使用 js-pinyin 实现汉字转拼音 完整代码： <template> <div class="wrap"> <van-index-bar highlight-color="#1989fa" :index-list="indexList"> <div v-for="item in filterData" :key="item.letter"&gt
vant IndexBar实现的城市列表的示例代码
10-15
主要介绍了vant IndexBar实现的城市列表的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vant Picker 移动端城市列表选择，未使用van-area
随心博客
11-23 1109
城市数据源使用的 vant，见github ：城市数据 也可以通过拿取 # 通过 npm npm i @vant/area-data # 通过 yarn yarn add @vant/area-data # 通过 pnpm pnpm add @vant/area-data h5: 通过弹窗的方法显示城市选择 <van-popup v-model:show="cityVisable" position="bottom"> <van-picker show-tool
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移动端组件库-其他
06-11
Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。特性：1、60+ 高质量组件2、95% 单元测试覆盖率3、完善的中英文文档和示例4、支持按需引入5、支持主题定制6、支持...
Android城市索引含定位和热门城市（悬浮块+右侧字母索引）
热门推荐
MirZou的博客
12-13 1万+
一、首先我们想要的效果是： 在城市索引的列表能够加个自定义头部； 有城市索引的字母悬浮块； 右侧的字母索引导航； 仿os效果的当前位置索引提示框 我们先来看下效果，本来想上传视频但是不知道怎么弄，无赖就用图片将就下：下面的代码可能有点多，但是如果是真的需要以上效果，请耐心往下看二、如何使用IndexableLayout： 需要加入第三方依赖库： compile 'me.yokeyword:index
vant indexBar地区索引级联选择
lemon今天学习了吗？的博客
05-12 1175
要求：使用van组件的indexBar索引栏实现地区的三级联动效果。 效果： 思路： 1.修改vant组件的indexBar变成规定样式； 2.将组件写成循环现实，并添加点击事件； 3.点击事件: 判断是否点击的时索引栏的地区还是头部的选中地区，若点击的索引栏的地区，则把点击的地区赋给头部的地区进行显示；若点击的是头部的地区，则清空所点击的地区； 4.将要展示的地区数组根据首字母排序展示； 相关代码实现： 1. 样式框架 <div class="map-popup"&
微信小程序 使用Vant Weapp框架中IndexBar索引栏字母不动问题
紫一的博客
04-09 1594
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 索引栏
qq_41818857的博客
11-10 6171
1、效果图如下： 2、数据格式化前后对比 格式化之前(即一般后台请求的数据) 格式化之后，将数据按开头字母进行分类 3、数据格式化的方法 let cityName = {}; //循环26个字母的数组 this.FirstPin.forEach(item => { cityName[item] = []; cities.forEach(el => { //对比开头字母是否对应 let first = el.pinyin.sub
vant 索引城市不对_Vant IndexBar 索引栏
weixin_30737431的博客
12-23 1057
引入import Vue from 'vue';import { IndexBar, IndexAnchor } from 'vant';Vue.use(IndexBar);Vue.use(IndexAnchor);代码演示基础用法点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置...自定义索引列表可以通过index-list属性自定义展示的索引字符列表，标题1标题2...expor...
有没有vant使用indexBar遇到这种问题的
luminousqui的博客
12-20 1404
使用vant的bug
uniapp小程序把vant 组件库van-collapse的箭头放在左边
06-08
要把vant组件库van-collapse的箭头放在左边，可以通过以下步骤实现： 1. 在使用van-collapse组件的地方，添加一个`custom-class`属性，用于自定义组件的样式类，例如：`<van-collapse custom-class="my-collapse">`。 2. 在页面的样式文件中，添加以下代码： ```css .my-collapse .van-collapse-item__header { flex-direction: row-reverse; /* 将折叠面板标题和箭头的方向改为水平方向 */ justify-content: flex-start; /* 将折叠面板标题和箭头左对齐 */ } .my-collapse .van-collapse-item__header .van-icon { margin-left: 5px; /* 调整箭头和标题之间的间距 */ margin-right: 0; /* 去掉箭头右边的默认间距 */ } ``` 这样就可以将van-collapse组件的箭头放在左边了。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值