H5CityList

功能描述

  1. H5CityList 模块是一个可定制数据源的城市列表；模块根据数据源自动生成字母索引，点击字母索引快速滚动至目标数据，支持数据源搜索；用于实现城市列表的展示，搜索，及导航功能。

依赖的模块

  1. ./libs/convert-pinyin.js // 获取拼音
  2. ./libs/vue.min.js
  3. ./libs/bscroll.min.js

快速使用

  1.   <div id="app" class="listview" ref="listview">
  2.     <div ref="wrapper" style="height: 100%;position: relative;">
  3.       <ul>
  4.         <li v-for="(group,index) in cityList" class="list-group" ref="listGroup">
  5.           <h2 class="list-group-title" v-show="group.title">{{group.title}}</h2>
  6.           <uL>
  7.             <li @click="selectItem(item)" v-for="item in group.items" class="list-group-item">
  8.               <span class="name">{{item.name}}</span>
  9.             </li>
  10.           </uL>
  11.         </li>
  12.       </ul>
  13.     </div>
  14.   </div>
  19.   app = new Vue({
  20.     el: '#app',
  21.     data: {
  22.       diff: -1,
  23.       cityList: [],
  24.       keyword: '', // 搜索关键词
  25.       refreshDelay: 20,
  26.       ANCHOR_HEIGHT: 18,
  27.       scrollY: -1,
  28.       currentIndex: 0,
  29.       TITLE_HEIGHT: 30, // title的高度，需要和css配合
  30.     },
  31.     created: function () {
  32.       that = this;
  33.       that.resouseLists = cityList; //原始城市数据，可从ajax获取
  34.       that.initCityList(that.resouseLists);
  35.       that.touch = {};
  36.       that.listHeight = [];
  37.     },
  38.     mounted: function () {
  39.       setTimeout(function () {
  40.         that._initScroll()
  41.       }, 20);
  42.       setTimeout(function () {
  43.         that._calculateHeight()
  44.       }, 20);
  45.     },
  46.     methods: {
  47.       // 初始化城市数据获取需要的数字对象
  48.       initCityList: function (list) {...},
  49.       初始化滚动
  50.       _initScroll: function () {...},
  51.       初始化滚动区域高度
  52.       _calculateHeight: function () {...},
  53.     },
  54.   })

特别说明

  1. 将H5CityList.html直接用浏览器打开，就可以运行本模块。可以用win获取frame加载本模块。样式可以在H5CityList.css中修改，但请保持原有的dom结构（除非你明确自己想要什么）。引入的cityList.js仅作为测试数据，实际数据请从服务器获取。更多使用方法，可参考H5CityList.html。