微信小程序实现根据字母选择城市功能-创新互联

今天开发一个小程序，里面涉及到区域选择，看了网上的一些版本，感觉写的不全，有可能是我的理解能力还不够吧。今天我就结合网上的答案，在根据自己的需求，重新整理一份。希望对大家有帮助。先看看截图：

项目截图

下面我们把代码梳理一下。

一、创建index.wxml文件

在pages->index文件夹下，新建index.wxml文件，代码如下：

 class="title">
  class="title_list" value="{{cityName}}" placeholder="城市名称" />
 确认
  scroll-y="true"  scroll-into-view="{{scrollTopId}}" class="city_list">
   wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
    id="{{idx}}" class="list_tit">{{idx}}
    wx:for="{{cityName}}">
     class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}
   
  
 class="scroll_list" 
   bindtouchstart="chStart"
   bindtouchend="chEnd"
   catchtouchmove="chMove"
   
   >
  wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
    wx:if="{{idx != '热门城市'}}">
    id="{{idx}}" class="scroll_list_chi"  bindtouchstart="getWords" bindtouchend="setWords">{{idx}}
   
  
 hidden="{{hidden}}" class="showwords">
 {{showwords}}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。