H5CityList

功能描述

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

依赖的插件

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

快速使用

  <div id="app" class="listview" ref="listview">
    <div ref="wrapper" style="height: 100%;position: relative;">
      <ul>
        <li v-for="(group,index) in cityList" class="list-group" ref="listGroup">
          <h2 class="list-group-title" v-show="group.title">{{group.title}}</h2>
          <uL>
            <li @click="selectItem(item)" v-for="item in group.items" class="list-group-item">
              <span class="name">{{item.name}}</span>
            </li>
          </uL>
        </li>
      </ul>
    </div>
  </div>




  app = new Vue({
    el: '#app',
    data: {
      diff: -1,
      cityList: [],
      keyword: '', // 搜索关键词
      refreshDelay: 20,
      ANCHOR_HEIGHT: 18,
      scrollY: -1,
      currentIndex: 0,
      TITLE_HEIGHT: 30, // title的高度，需要和css配合
    },
    created: function () {
      that = this;
      that.resouseLists = cityList; //原始城市数据，可从ajax获取
      that.initCityList(that.resouseLists);
      that.touch = {};
      that.listHeight = [];
    },
    mounted: function () {
      setTimeout(function () {
        that._initScroll()
      }, 20);
      setTimeout(function () {
        that._calculateHeight()
      }, 20);
    },
    methods: {
      // 初始化城市数据获取需要的数字对象
      initCityList: function (list) {...},
      初始化滚动
      _initScroll: function () {...},
      初始化滚动区域高度
      _calculateHeight: function () {...},
    },
  })

特别说明

将H5CityList.html直接用浏览器打开，就可以运行本插件。可以用win获取frame加载本插件。样式可以在H5CityList.css中修改，但请保持原有的dom结构（除非你明确自己想要什么）。引入的cityList.js仅作为测试数据，实际数据请从服务器获取。更多使用方法，可参考H5CityList.html。
是否仍需要帮助？ 请保持联络！
最后更新于 2024/07/22