wxc-city

通用城市选择组件，允许配置输入框、定位、热门城市、普通城市列表等

Demo

wxc-city 城市选择 - 图1 wxc-city 城市选择 - 图2

weex-ui >= 0.3.10

使用方法

  1. <template>
  2.   <div class="wxc-demo">
  3.     <scroller class="scroller">
  4.       <div class="btn" @click="showListCity">
  5.         <text class="btn-txt">城市选择</text>
  6.       </div>
  7.       <div class="panel">
  8.         <text v-if="currentCity" class="text">当前城市: {{currentCity}}</text>
  9.       </div>
  10.     </scroller>
  11.     <wxc-city ref="wxcCity"
  12.               :animationType="animationType"
  13.               :currentLocation="location"
  14.               :cityStyleType="cityStyleType"
  15.               :sourceData="sourceData"
  16.               @wxcCityItemSelected="citySelect"
  17.               @wxcCityOnInput="onInput"></wxc-city>
  18.   </div>
  19. </template>
  20. <script>
  21.    // 若无特殊干掉data.js 直接使用默认的即可
  22.   import sourceData from './data';
  23.   import { WxcCity } from 'weex-ui';
  24.   export default {
  25.     components: { WxcCity },
  26.     data: () => ({
  27.       animationType: 'push',
  28.       currentCity: '',
  29.       sourceData,
  30.       cityStyleType:'list',
  31.       location: '定位中'
  32.     }),
  33.     mounted () {
  34.       // 模拟定位
  35.       setTimeout(() => {
  36.         this.location = '杭州';
  37.       }, 500);
  38.     },
  39.     methods: {
  40.       showListCity () {
  41.         this.cityStyleType = 'list'
  42.         this.$refs['wxcCity'].show();
  43.       },
  44.       showGroupCity () {
  45.         this.cityStyleType = 'group'
  46.         this.$refs['wxcCity'].show();
  47.       },
  48.       citySelect (e) {
  49.         this.currentCity = e.item;
  50.       },
  51.       onInput (e) {
  52.       }
  53.     }
  54.   };
  55. </script>

更详细代码可以参考 demo注：默认示例加载的是手动配置的城市数据源参考data.js，为区分默认数据源以及手动设置的数据源特在手动配置的数据源中去掉了'北京'这个城市

可配置参数

Prop Type Required Default Description
input-config Object N {} 城市选择输入框配置, 注1
source-data Object N 注：不传此参数，默认使用常规城市列表数据源 城市列表数组配置，注2
city-style-type String N list 城市列表样式的配置，注3
current-location String Y `` 定位城市配置，注4
show-index Boolean N true 是否显示右侧索引项
show-nav-header Boolean N true 是否显示分栏顶部
show-tab Boolean N false 是否需要显示国内、国外TAB
city-height Number N 0 自定义城市高度，非特殊业务不要设置！
animationType String N push 自定义转场动画类型目前支持model和push

  • 注1：输入框配置，采用deep copy merge，可以设置输入框的如下：

    {

    1. autofocus: false,
    2. alwaysShowCancel: true,
    3. placeholder: &#39;中文/拼音/首字母&#39;

    }Click to copy

  • 注2：城市列表数组配置，详细可见data.js,整体详细如下：

    {

    1. hotCity: [
    2.     { cityName: &#39;北京&#39;, pinYin: &#39;beijing&#39;, py: &#39;bj&#39; }
    3. ],
    4. cities: [
    5.     { cityName: &#39;北京&#39;, pinYin: &#39;beijing&#39;, py: &#39;bj&#39; }
    6. ]

    }Click to copy

  • 注3：城市列表样式的配置，支持group和list形式

  • 注4：定位城市列表配置，如：杭州

事件回调

  1. // 取消按钮回调
  2. @wxcCityCanceled="cityCancel"
  3. // 城市选择后回调
  4. @wxcCityItemSelected="citySelect"
  5. // 输入回车回调
  6. @wxcCityOnKeyUpEnter="cityOnKeyUpEnter"
  7. // 城市输入框输入回调
  8. @wxcCityOnInput="cityInputChange"

异步数据问题

假如城市数据，需要请求后再显示，可以使用this.$refs.wxcCity.saveDefaultSourceData = {…myData};方式来更新

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-city/