vant indexbar 做城市列表

最新推荐文章于 2024-06-22 16:39:23 发布

努力的小雷

最新推荐文章于 2024-06-22 16:39:23 发布

阅读量1k

点赞数 3

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_49879334/article/details/116055131

版权

本文介绍了如何利用Vant的IndexBar组件在Vue项目中创建城市列表，并解决在点击索引栏时，滚动位置被搜索框遮挡的问题。通过调整滚动定位，实现了用户可以清晰查看选中的城市列表项。

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

需求：搜索框固定在顶部，点击右侧的索引栏时，跳转到相应的锚点
问题：跳转到的位置默认在最顶层，被搜索框挡住
问题解决方法如下
先看效果图
刚进去
在这里插入图片描述
点击右侧

在这里插入图片描述
代码

<div class="citySearch">
      <van-search
        v-model="value"
        shape="round"
        background="#F2F2F2"
        placeholder="搜索"
      />
    </div>
    <div class

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力的小雷

关注关注

3
点赞
踩
7

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

weixin_33869754的博客

12-23

478

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

vue中使用vant移动端开发，indexBar 进行城市选择列表

荔枝吖阿

06-22

4397

1.按需引入组件，在 babel.config.js 中配置 https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: tru

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

vue vant indexBar实现侧边栏城市列表

最新发布

m0_71204755的博客

06-22

318

sticky-offset-top：吸顶。index-list：自定义索引。

vue3+vant4 二次封装IndexBar城市列表组件以及性能优化

HaushoLin的博客

06-03

726

二次封装城市列表以及对静态资源的引入做异步引入优化。

小程序实现vant weapp UI的van-index-bar组件（城市列表）

我的第一篇文章

12-19

4860

效果 van-index-bar组件地址：https://youzan.github.io/vant-weapp/#/index-bar ps：这儿的页面效果和vant weapp组件上不一样，是因为当时引用该组件的时候样式就出了问题，索性我就修改了样式 index.wpy ps:此处页面上的代码也和vant weapp上不一样。当时我是照着vant写的，结果一直没出来，心塞。但又因为...

vant 中使用indexBar 进行城市选择列表

彳亍的博客

12-26

8642

在开发中，有城市选择页面，采用vant中的indexBar和全国城市列表json数据，直接上代码： vant官方介绍：https://youzan.github.io/vant/#/zh-CN/index-bar 城市json数据：https://github.com/wwjjss/city 基础用法点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置 <van-i...

vant 拼音排序城市列表

weixin_42327537的博客

08-08

882

template> <div> <van-index-barclass="indexBar":sticky="false"highlight-color="#AE853A"> <van-index-anchorv-for="(item,index)inthis.cityData":key="index":index=item.id> <spanclass="indexWord"@click="...

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

热门推荐

qq_30424359的博客

07-26

1万+

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

vant IndexBar实现的城市列表的示例代码

10-15

主要介绍了vant IndexBar实现的城市列表的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

SuspensionIndexBar(仿美团城市定位列表展示)

12-25

https://github.com/mcxtzhang/SuspensionIndexBar/ 可运行的项目城市列表仿美团城市列表展示

vant中IndexBar 索引栏自定义索引列表

YHLQ的博客

12-23

2148

通过index-list属性自定义展示的索引字段父组件：search.vue <template> <div> <searchHeader></searchHeader> <searchList :mCities="Cities"></searchList> </div> </template> <script> import sear

【前端】Vue项目：旅游App-（11）city：添加热门数据、动态修改索引栏、点击跳转、显示城市

karshey的博客

01-09

821

添加热门数据、动态修改索引栏、点击跳转、显示城市

vant Picker 移动端城市列表选择，未使用van-area

随心博客

11-23

1119

城市数据源使用的 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

JS - 获取汉字拼音首字母

chiji8087的博客

11-24

1448

// 汉字拼音首字母列表本列表包含了20902个汉字,用于配合 ToChineseSpell //函数使用,本表收录的字符的Unicode编码范围为19968至40869, XDesigner 整理 var strChineseFirstPY = "YDYQSXMWZSSXJBYMGCCZQ...

微信小程序通过 vant 实现选择城市

m0_63281943的博客

11-29

1385

新建 utlis > city.js。city.js 数据源配置导出。

vant indexBar地区索引级联选择

lemon今天学习了吗？的博客

05-12

1225

要求：使用van组件的indexBar索引栏实现地区的三级联动效果。效果：思路： 1.修改vant组件的indexBar变成规定样式； 2.将组件写成循环现实，并添加点击事件； 3.点击事件: 判断是否点击的时索引栏的地区还是头部的选中地区，若点击的索引栏的地区，则把点击的地区赋给头部的地区进行显示；若点击的是头部的地区，则清空所点击的地区； 4.将要展示的地区数组根据首字母排序展示；相关代码实现： 1. 样式框架 <div class="map-popup"&

Vue项目中获取本地的json文件数据

郭宝的博客

04-14

4016

具体步骤 1、首先将.json文件数据放置到项目根目录下的 public文件夹下 2、然后到需要使用的地方通过 axios 获取本地数据，代码如下： getMenuData() { axios.get('/menu.json') .then(result => { console.log('getMenuData', result) }) .catch(error => {

vant indexBar如何指定相关元素距离顶部的距离

07-12

对于 Vant 的 IndexBar 组件，你可以使用 `sticky` 属性来指定相关元素距离顶部的距离。将 `sticky` 属性设置为 `true`，相关元素将会在滚动时固定在顶部，距离顶部的距离是根据页面上的其他元素来计算的。以下是...