Mint UI实现A-Z字母排序的城市选择列表

本文实例为大家分享了Mint Ul实现A-Z字母排序的城市选择列表的具体代码，供大家参考，具体内容如下

效果图如下：

项目文件存放路径图：

pinying.js 和 city.json文件下载传送门

所有代码如下：

<template>
  <mt-index-list>
    <mt-index-section v-for="letter in citySortArr" :key="letter" :index="letter">
      <mt-cell v-for="cityName in cityArr" :key="cityName" v-if="cityName.key == letter" :title="cityName.value "></mt-cell>
    </mt-index-section>
  </mt-index-list>
</template>

<script>
import city from "../assets/json/city"//导入所有城市的JSON
import { makePy } from "../assets/js/pinying"//导入插件获取所有城市中文的大写首字母

export default {
 data () {
  return {
   arr: [],//存放初始筛选的城市名称
   cityArr: [],//存放第二次筛选后所有城市名称
   citySort: [],//存放初始获取城市首字母大写的数组
   citySortArr: []//存放第二次筛选重复，不存在的城市首字母数组
  };
 },
 created () {

  /**
   * 将json数据中的无用数据剔除
   */
  for (let i in city) {
   if (city[i].name != "请选择") {//将第一层数据中为 “请选择” 的剔除掉
    this.arr.push(city[i].name);
    for (let j in city[i].sub) {//将第二层数据中为 “请选择 和 其他” 的剔除掉
     if (
      city[i].sub[j].name != "请选择" &&
      city[i].sub[j].name != "其他"
     ) {
      this.arr.push(city[i].sub[j].name);//将处理后的数据存放在数组中，等待第二次筛选处理
     }
    }
   }
  }

  /**
   * 配置相关数据
   */
  for (let k in this.arr) {
   let cityKey = makePy(this.arr[k])[0].substring(0, 1);//获取每一个市区的首字母
   let cityValue = this.arr[k];//获取所有市区
   this.citySort[cityKey] = cityKey;//利用对象特性，剔除重复的字母，并将剔除后的字母存进对象中

   //将所有市区信息 以（ 字母 - 市区名 ）的格式存在至数组中
   this.cityArr[k] = {
    key: cityKey,
    value: cityValue
   };
  }

  /**
   * 将处理后的首字母数据对象，存放至数组中
   */
  for (let p in this.citySort) {
    this.citySortArr.push(this.citySort[p]);
  }

  /**
   * 将真实存在的市区首字母按A-Z进行排序
   */
  this.citySortArr = this.citySortArr.sort();

 }
};
</script>

<style>
.mint-cell-title {
  flex: 0 0 auto;
}

.mint-indexsection-index {
  text-align: left;
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue基于mint-ui的城市选择3级联动的示例

    vue基于mint-ui的城市选择3级联动的示例

    项目是基于 vue2 的移动端项目 1.实际效果 地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据 如下: https://github.com/artiely/Administrative-divisions-of-China(里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) 3.具体代码 主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <m

  • vue基于mint-ui实现城市选择三级联动

    vue基于mint-ui实现城市选择三级联动

    项目是基于vue2 的移动端项目,供大家参考,具体内容如下 1.实际效果 地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据 如下: (这个地址里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) (一个更好的中国地区数据,推荐用这个) 3.具体代码 主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <mt-picker :slots="my

  • Mint UI实现A-Z字母排序的城市选择列表

    Mint UI实现A-Z字母排序的城市选择列表

    本文实例为大家分享了Mint Ul实现A-Z字母排序的城市选择列表的具体代码,供大家参考,具体内容如下 效果图如下: 项目文件存放路径图: pinying.js 和 city.json文件下载传送门 所有代码如下: <template> <mt-index-list> <mt-index-section v-for="letter in citySortArr" :key="letter" :index="letter&quo

  • Android仿微信联系人字母排序效果

    Android仿微信联系人字母排序效果

    本文实例为大家分享了Android联系人字母排序的具体代码,供大家参考,具体内容如下 实现思路:首先说下布局,整个是一个相对布局,最下面是一个listview,listview上面是一个自定义的view(右边显示字母),最上面是一个textview(屏幕中间的方块). 首先说一下右边自定义view,字母是画到view上面的,首先计算一下view的高度,然后除以存放字母数组的长的,得到每个字符的高度:每个字母的宽度都是一样的,所以这里直接设置30sp: listview显示的是108个梁山好汉的名

  • Android仿微信联系人按字母排序

    Android仿微信联系人按字母排序

    App只要涉及到联系人的界面,几乎都是按照字母排序以及导航栏的方式.既然这个需求这么火,于是开始学习相关内容,此篇文章是我通过参考网上资料独立编写和总结的,希望多多少少对大家有所帮助,写的不好,还请各位朋友指教. 效果图如下: 实现这个效果,需要三个知识点 : 1:将字符串 进行拼音分类 2:ExpandableListView 二级扩展列表 3:右边字母分类View 我们先一个一个来了解解决方案,再上代码. 实现字母分类: 字母分类又分为三个小要点:一个是将中文转化为拼音,一个是实现按照字母的

  • Android实现ListView的A-Z字母排序和过滤搜索功能 实现汉字转成拼音

    Android实现ListView的A-Z字母排序和过滤搜索功能 实现汉字转成拼音

    直入主题,今天给大家带来ListView的A-Z字母排序和过滤搜索功能并且实现汉字转成拼音的功能,我们知道一般我们对联系人,城市列表等实现A-Z的排序,因为联系人和城市列表我们可以直接从数据库中获取他的汉字拼音,而对于一般的数据,我们怎么实现A-Z的排序,我们需要将汉字转换成拼音就行了,接下来就带大家实现一般数据的A-Z排序功能,首先先看下效果图 上面是一个带删除按钮的EditText,我们在输入框中输入可以自动过滤出我们想要的东西,当输入框中没有数据自动替换到原来的数据列表,然后下面一个Lis

  • php实现姓名根据首字母排序的类与方法(实例代码)

    php将名字按首字母进行排序,具体代码如下所示: <?php public function getFirstChar($s){ $s0 = mb_substr($s,0,3); //获取名字的姓 $s = iconv('UTF-8','gb2312', $s0); //将UTF-8转换成GB2312编码 //dump($s0); if (ord($s0)>128) { //汉字开头,汉字没有以U.V开头的 $asc=ord($s{0})*256+ord($s{1})-65536; if($a

  • Java编程实现中英混合字符串数组按首字母排序的方法

    本文实例讲述了Java编程实现中英混合字符串数组按首字母排序的方法.分享给大家供大家参考,具体如下: 在Java中对于字符串数组的排序,我们可以使用Arrays.sort(String[])方法很便捷的进行排序.例如: String[] arrays = new String[] { "gyu", "sdf", "zf", "大同", "收到", "地方", "三等分"

  • Mint UI 基于 Vue.js 移动端组件库

    Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • 基于VUE.JS的移动端框架Mint UI的使用

    基于VUE.JS的移动端框架Mint UI的使用

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

  • Java实现按中文首字母排序的具体实例

    Java实现按中文首字母排序的具体实例

    要实现"按中文首字母排序"操作,可以使用java.util包下的Arrays类的sort()函数. Arrays类包含用来操作数组(比如排序和搜索)的各种方法. 比如对于排序操作的sort()函数,重载了多种静态函数以适应不同情况下的需要. 以下,我们应用最后一个重载函数来实现"按中文首字母排序": 复制代码 代码如下: sort(T[] a, Comparator<? super T> c) 根据指定比较器产生的顺序对指定对象数组进行排序. 代码举例:

  • mysql如何根据汉字首字母排序

    复制代码 代码如下: select areaName from area order by convert(areaName USING gbk) COLLATE gbk_chinese_ci asc 说明:areaName为列名 area为表名 PS:这里再为大家推荐一款本站的相关在线工具供大家参考: 在线中英文根据首字母排序工具: http://tools.jb51.net/aideddesign/zh_paixu

随机推荐