vant 实现IndexBar 索引栏

1、效果图如下：

2、数据格式化前后对比
格式化之前(即一般后台请求的数据)

格式化之后，将数据按开头字母进行分类

3、数据格式化的方法

let cityName = {};//循环26个字母的数组this.FirstPin.forEach(item => {cityName[item] = [];cities.forEach(el => {//对比开头字母是否对应let first = el.pinyin.substring(0, 1).toUpperCase();if (first == item) {cityName[item].push(el);}});
});
4、全部实现代码
<template><div class="content"><van-sticky><van-nav-bartitle="选择城市"left-arrow/><van-search v-model="search" placeholder="请输入搜索关键词" /></van-sticky><van-index-bar :sticky='false'><van-index-anchor :index="name" v-for="(item,name) in cities" :key="name"><b>{{name}}</b></van-index-anchor></van-index-bar></div>
</template><script>
export default {data(){return{FirstPin: ["A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","W","X","Y","Z"],cities:{},search:''}},mounted(){this.$axios({url:'请求地址'}).then(res=>{var cities = '请求得到的数据';console.log(cities)let cityName = {};//循环26个字母的数组this.FirstPin.forEach(item => {cityName[item] = [];cities.forEach(el => {//对比开头字母是否对应let first = el.pinyin.substring(0, 1).toUpperCase();if (first == item) {cityName[item].push(el);}});            });console.log(cityName) this.$nextTick(()=>{this.cities = cityName; }) }).catch(err=>{console.log(err)})}
}
</script><style lang="scss" scoped>
.content{background: #eee;
}
::v-deep .van-index-anchor{padding: 0;b{padding-left:10px;font-size: 14px;font-weight: 600;}
}
</style>

转载自：https://www.cnblogs.com/piaoyi1997/p/13533367.html

vant 实现IndexBar 索引栏相关推荐

vant 索引城市不对_手把手Vue移动端使用vant完成索引栏功能
背景写选择手机号码前缀功能,需要使用索引栏,遂到框架内找到,并在网上找到数据 image.png image.png 开始 2.数据 export let country = { 'hot': [ ...
微信小程序使用vant-weapp中的索引栏右侧点不动，滚定索引失效问题
微信小程序使用vant-weapp中的索引栏右侧点不动,滚定索引失效问题 vant的索引栏只要使用了定位,或者自定义头部,那么vant的索引栏就会出现各种BUG,基本不能用,这里我是基本重新写了一个 ...
玩转android自定义控件二——自定义索引栏listview
带索引栏的listview,在android开发非常普遍,方便用户进行字母索引,就像微信通讯录这样: 今天,我们就从零到一实现这个具有索引栏的listview. 怎么实现这个控件了,我们应当梳理出一个 ...
03-UITableView索引栏显示自定义图片
如果对iOS开发感兴趣,可以来黑马程序员学习iOS:黑马程序员 1.1-系统API有没有提供相关的属性或者代理呢? 1.2-自定义View作为索引栏 1.3-使用NSString显示图片原理 1.3. ...
自定义联系人快速索引栏
--每天做一点,温故而知新看看效果吧额,我这个为了简单,简单的用了下toast,所以有三秒,有点长.没录到它消失的.大于两M.这不是重点,有兴趣的可以下载代码自己改.来看看这个索引栏栏怎么画的吧. ...
首字母排序侧边索引栏：WaveSideBar的简单使用
参考 [WaveSideBar](https://github.com/gjiazhe/WaveSideBar) 场景在Android开发中会经常用到侧边索引栏,并且根据中文的首字母排序.额..废话 ...
微信小程序实现《索引栏》
一.根据英语,下标实现索引栏 1.positioning.wxml <van-index-bar><view wx:for="{{insexbar}}" wx:k ...
Vant组件NavBar导航栏使用时去除下方白线问题
如上图,在使用Vant组件导航栏时,下方会有白线,但有时是不需要它的,下面是去掉白线的方法: // 去掉导航栏底部白线 .van-hairline--bottom:after { border-b ...
索引栏_网站导航栏如何设置才能促使网站SEO优化更好？
众所周知,网站导航是一个网站不可或缺的一部分,优质的网站导航栏不仅能够让访客知道自己的所在位置,还能提高访客的浏览效率,更好的提高用户体验,那么导航栏要怎样设置才能更有利于SEO优化呢?下面一起来了解 ...

vant 实现IndexBar 索引栏

vant 实现IndexBar 索引栏相关推荐

最新文章

热门文章