微信小程序中根据字母选择城市

最新推荐文章于 2024-09-23 11:06:19 发布
最新推荐文章于 2024-09-23 11:06:19 发布
阅读量1.2w 收藏 2
点赞数 4
分类专栏： 微信小程序开发 文章标签： 小程序 小程序开发文档 微信小程序开发 微信小程序开发教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38125123/article/details/76229117
版权
本文档详细介绍了如何在微信小程序中开发一个根据字母选择城市的特性。通过创建index.wxml、index.wxss、index.js文件及城市数据文件city.js，实现城市选择功能。适合小程序开发者参考学习。
摘要由CSDN通过智能技术生成

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

项目截图 
下面我们把代码梳理一下。

一、创建index.wxml文件

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

 
 
 
    
  
    2. 
  
  2.  <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="title">
    3. 
  
  3.   <input< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="title_list" value="{
      {cityName}}" placeholder="城市名称" />
    4. 
  
  4.   
    5. 
  
    6. 
  
  6. <scroll-view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;">   scroll-y="true" style="height: {
      {
      winHeight}}px;" scroll-into-view="{
      {scrollTopId}}" class="city_list">
    7. 
  
  7.     <block< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:for="{
      {city}}" wx:for-index="idx" wx:for-item="cityName">
    8. 
  
  8.       <text< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> id="{
      {idx}}" class="list_tit">{
      {idx}}
    9. 
  
  9.       <block< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:for="{
      {cityName}}">
    10. 
  
    11. 
  
  11.          <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="list_con" data-city="{
      {item.name}}" bindtap="bindCity">{
      {item.name}}
    12. 
  
  12.       
    13. 
  
  13.     
    14. 
  
    15. 
  
    16. 
  
  16. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;">  class="scroll_list" 
    17. 
  
  17.       bindtouchstart="chStart"
    18. 
  
  18.       bindtouchend="chEnd"
    19. 
  
  19.       catchtouchmove="chMove"
    20. 
  
  20.       style="background: rgba(0,0,0,{
     {
     trans}});"
    21. 
  
  21.       >
    22. 
  
  22.    <block< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:for="{
      {city}}" wx:for-index="idx" wx:for-item="cityName">
    23. 
  
  23.       <block< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:if="{
      {idx != '热门城市'}}">
    24. 
  
  24.        <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> id="{
      {idx}}" class="scroll_list_chi" style="line-height:{
      {
      lineHeight}}px ; height:{
      {
      lineHeight}}px ;font-size:{
      {
      lineHeight/1.7}}px;" bindtouchstart="getWords" bindtouchend="setWords">{
      {idx}}
    25. 
  
  25.       
    26. 
  
  26.     
    27. 
  
    28. 
  
    29. 
  
    30. 
  
  30. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> hidden="{
      {hidden}}" class="showwords">
    31. 
  
  31.   {
     {showwords}}
    32. 
  
    33.

二、创建对应的CSS

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

 
 
 
    
  
  1. /**index.wxss**/
    2. 
  
    3. 
  
  3. .title {
     
    4. 
  
  4.     position: relative;
    5. 
  
  5.     padding: 10px 0;
    6. 
  
  6. }
    7. 
  
  7. .title_list {
     
    8. 
  
  8.     display: inline-block;
    9. 
  
  9.     padding: 0 15px;
    10. 
  
  10.     height: 20px;
    11. 
  
  11.     line-height: 20px;
    12. 
  
  12.     font-size: 16px;
    13. 
  
  13. }
    14. 
  
  14. .title button {
     
    15. 
  
  15.     width: 50px;
    16. 
  
  16.     height: 30px;
    17. 
  
  17.     font-size: 16px;
    18. 
  
  18.     padding: 0;
    19. 
  
  19.     line-height: 30px;
    20. 
  
  20.     margin: auto;
    21. 
  
  21.     position: absolute;
    22. 
  
  22.     top: 0;
    23. 
  
  23.     bottom:0;
    24. 
  
  24.     right: 10px;
    25. 
  
  25.     background: none;
    26. 
  
  26. }
    27. 
  
  27. .title button::after {
     
    28. 
  
  28.     border: none;
    29. 
  
  29. }
    30. 
  
  30. .title_list:nth-child(1) {
     
    31. 
  
  31.     border-right:1px #ccc solid;
    32. 
  
  32. }
    33. 
  
  33. /*城市列表*/
    34. 
  
  34. .city_list {
     
    35. 
  
  35.     position: relative;
    36. 
  
  36. }
    37. 
  
    38. 
  
  38. /*城市选择头部*/
    39. 
  
  39. .list_tit {
     
    40. 
  
  40.     display: block;
    41. 
  
  41.     line-height: 40px;
    42. 
  
  42.     height: 40px;
    43. 
  
  43.     padding-left: 15px;
    44. 
  
  44.     font-size: 16ppx;
    45. 
  
  45.     background: #f5f5f5;
    46. 
  
  46.     color: #666;
    47. 
  
  47. }
    48. 
  
  48. .list_con {
     
    49. 
  
  49.     height: 40px;
    50. 
  
  50.     /*border-top: 1px #f5f5f5 solid ;*/
    51. 
  
  51.     line-height: 40px;
    52. 
  
  52.     font-size: 16px;
    53. 
  
  53.     padding-left: 15px;
    54. 
  
  54. }
    55. 
  
  55. .list_con::before {
     
    56. 
  
  56.     content: " ";
    57. 
  
  57.     height: 1px;
    58. 
  
  58.     border-top: 1px #f5f5f5 solid;
    59. 
  
  59.     position: absolute;
    60. 
  
  60.     width: 100%;
    61. 
  
  61. }
    62. 
  
  62. .list_con::before:nth-child(1) {
     
    63. 
  
  63.     border: none;
    64. 
  
  64. }
    65. 
  
  65. /*城市选择 右边*/
    66. 
  
  66. .scroll_list {
     
    67. 
  
  67.     background: rgba(0,0,0,0);
    68. 
  
  68.     position: absolute;
    69. 
  
  69.     height: calc(100% - 100px);
    70. 
  
  70.     width: 25px;
    71. 
  
  71.     top: 90px;
    72. 
  
  72.     right: 10px;
    73. 
  
  73. }
    74. 
  
  74. .scroll_list_chi {
     
    75. 
  
  75.     /*border: 1px blue solid;*/
    76. 
  
  76.     text-align: center;
    77. 
  
  77.     font-size: 12px;
    78. 
  
  78. }
    79. 
  
  79. /*显示框*/
    80. 
  
    81. 
  
  81. .showwords {
     
    82. 
  
  82.     width: 80px;
    83. 
  
  83.     height: 80px;
    84. 
  
  84.     background: rgba(0,0,0,.3);
    85. 
  
  85.     border-radius:50%;
    86. 
  
  86.     line-height: 80px;
    87. 
  
  87.     text-align: center;
    88. 
  
  88.     font-size:10vw;
    89. 
  
  89.     margin: auto;
    90. 
  
  90.     position: absolute;
    91. 
  
  91.     top: 0;left: 0;bottom: 0;right: 0;
    92. 
  
  92.     z-index: 999;   
    93. 
  
  93. }
    94.

三、创建JS文件

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

 
 
 
    
  
  1. //先引用城市数据文件
    2. 
  
  2. var city = require('../../utils/city.js')
    3. 
  
  3. var lineHeight = 0;
    4. 
  
  4. var endWords = "";
    5. 
  
  5. var isNum;
    6. 
  
  6. Page({
     
    7. 
  
  7.   data: {
     
    8. 
  
  8.     "hidden": true,
    9. 
  
  9.     cityName:"", //获取选中的城市名
    10. 
  
    11. 
  
  11.   },
    12. 
  
  12.   onLoad: function (options) {
     
    13. 
  
  13.     // 生命周期函数--监听页面加载
    14. 
  
    15. 
  
    16. 
  
  16.   },
    17. 
  
  17.   onReady: function () {
     
    18. 
  
  18.     // 生命周期函数--监听页面初次渲染完成
    19. 
  
  19.     var cityChild = city.City[0];
    20. 
  
  20.     var that = this;
    21. 
  
  21.     wx.getSystemInfo({
     
    22. 
  
  22.       success: function (res) {
     
    23. 
  
  23.         lineHeight = (res.windowHeight - 100) / 22;
    24. 
  
  24.         console.log(res.windowHeight - 100)
    25. 
  
  25.         that.setData({
     
    26. 
  
  26.           city: cityChild,
    27. 
  
  27.           winHeight: res.windowHeight - 40,
    28. 
  
  28.           lineHeight: lineHeight
    29. 
  
  29.         })
    30. 
  
  30.       }
    31. 
  
  31.     })
    32. 
  
  32.   },
    33. 
  
  33.   onShow: function () {
     
    34. 
  
  34.     // 生命周期函数--监听页面显示
    35. 
  
    36. 
  
  36.   },
    37. 
  
  37.   onHide: function () {
     
    38. 
  
  38.     // 生命周期函数--监听页面隐藏
    39. 
  
    40. 
  
  40.   },
    41. 
  
  41.   onUnload: function () {
     
    42. 
  
  42.     // 生命周期函数--监听页面卸载
    43. 
  
    44. 
  
  44.   },
    45. 
  
  45.   //触发全部开始选择
    46. 
  
  46.   chStart: function () {
     
    47. 
  
  47.     this.setData({
     
    48. 
  
  48.       trans: ".3",
    49. 
  
  49.       hidden: false
    50. 
  
  50.     })
    51. 
  
  51.   },
    52. 
  
  52.   //触发结束选择
    53. 
  
  53.   chEnd: function () {
     
    54. 
  
  54.     this.setData({
     
    55. 
  
  55.       trans: "0",
    56. 
  
  56.       hidden: true,
    57. 
  
  57.       scrollTopId: this.endWords
    58. 
  
  58.     })
    59. 
  
  59.   },
    60. 
  
  60.   //获取文字信息
    61. 
  
  61.   getWords: function (e) {
     
    62. 
  
  62.     var id = e.target.id;
    63. 
  
  63.     this.endWords = id;
    64. 
  
  64.     isNum = id;
    65. 
  
  65.     this.setData({
     
    66. 
  
  66.       showwords: this.endWords
    67. 
  
  67.     })
    68. 
  
  68.   },
    69. 
  
  69.   //设置文字信息
    70. 
  
  70.   setWords: function (e) {
     
    71. 
  
  71.     var id = e.target.id;
    72. 
  
  72.     this.setData({
     
    73. 
  
  73.       scrollTopId: id
    74. 
  
  74.     })
    75. 
  
  75.   },
    76. 
  
    77. 
  
  77.   // 滑动选择城市
    78. 
  
  78.   chMove: function (e) {
     
    79. 
  
  79.     var y = e.touches[0].clientY;
    80. 
  
  80.     var offsettop = e.currentTarget.offsetTop;
    81. 
  
  81.     var height = 0;
    82. 
  
  82.     var that = this;
    83. 
  
  83.     ;
    84. 
  
  84.     var cityarr = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]
    85. 
  
  85.     // 获取y轴最大值
    86. 
  
  86.     wx.getSystemInfo({
     
    87. 
  
  87.       success: function (res) {
     
    88. 
  
  88.         height = res.windowHeight - 10;
    89. 
  
  89.       }
    90. 
  
  90.     });
    91. 
  
    92. 
  
  92.     //判断选择区域,只有在选择区才会生效
    93. 
  
  93.     if (y > offsettop && y < height) {
     
    94. 
  
  94.       // console.log((y-offsettop)/lineHeight)
    95. 
  
  95.       var num = parseInt((y - offsettop) / lineHeight);
    96. 
  
  96.       endWords = cityarr[num];
    97. 
  
  97.       // 这里 把endWords 绑定到this 上，是为了手指离开事件获取值
    98. 
  
  98.       that.endWords = endWords;
    99. 
  
  99.     };
    100. 
  
    101. 
  
    102. 
  
  102.     //去除重复，为了防止每次移动都赋值 ,这里限制值有变化后才会有赋值操作，
    103. 
  
  103.     //DOTO 这里暂时还有问题，还是比较卡，待优化
    104. 
  
  104.     if (isNum != num) {
     
    105. 
  
  105.       // console.log(isNum);
    106. 
  
  106.       isNum = num;
    107. 
  
  107.       that.setData({
     
    108. 
  
  108.         showwords: that.endWords
    109. 
  
  109.       })
    110. 
  
  110.     }
    111. 
  
  111.   },
    112. 
  
  112.   //选择城市，并让选中的值显示在文本框里
    113. 
  
  113.   bindCity: function(e) {
     
    114. 
  
  114.     console.log(e);
    115. 
  
  115.     var cityName = e.currentTarget.dataset.city;
    116. 
  
  116.     this.setData({
      cityName: cityName })
    117. 
  
    118. 
  
  118.   }
    119. 
  
    120. 
  
  120. })
    121.

四、创建城市文件

在utils文件夹里创建city.js文件，具体代码如下：

 
 
 
    
  
  1. var city = {
     
    2. 
  
  2.   "City": [
    3. 
  
  3.     {
     
    4. 
  
  4.       "热门城市": [
    5. 
  
    6. 
  
  6.         {
     
    7. 
  
  7.           "name": "北京",
    8. 
  
  8.           "key": "热门"
    9. 
  
  9.         },
    10. 
  
  10.         {
     
    11. 
  
  11.           "name": "上海",
    12. 
  
  12.           "key": "热门"
    13. 
  
  13.         },
    14. 
  
  14.         {
     
    15. 
  
  15.           "name": "广州",
    16. 
  
  16.           "key": "热门"
    17. 
  
  17.         },
    18. 
  
  18.         {
     
    19. 
  
  19.           "name": "深圳",
    20. 
  
  20.           "key": "热门"
    21. 
  
  21.         },
    22. 
  
  22.         {
     
    23. 
  
  23.           "name": "成都",
    24. 
  
  24.           "key": "热门"
    25. 
  
  25.         },
    26. 
  
    27. 
  
  27.         {
     
    28. 
  
  28.           "name": "重庆",
    29. 
  
  29.           "key": "热门"
    30. 
  
  30.         },
    31. 
  
  31.         {
     
    32. 
  
  32.           "name": "天津",
    33. 
  
  33.           "key": "热门"
    34. 
  
  34.         },
    35. 
  
  35.         {
     
    36. 
  
  36.           "name": "杭州",
    37. 
  
  37.           "key": "热门"
    38. 
  
  38.         },
    39. 
  
  39.         {
     
    40. 
  
  40.           "name": "南京",
    41. 
  
  41.           "key": "热门"
    42. 
  
  42.         },
    43. 
  
  43.         {
     
    44. 
  
  44.           "name": "苏州",
    45. 
  
  45.           "key": "热门"
    46. 
  
  46.         },
    47. 
  
  47.         {
     
    48. 
  
  48.           "name": "武汉",
    49. 
  
  49.           "key": "热门"
    50. 
  
  50.         },
    51. 
  
    52. 
  
  52.         {
     
    53. 
  
  53.           "name": "西安",
    54. 
  
  54.           "key": "热门"
    55. 
  
  55.         }
    56. 
  
    57. 
  
  57.       ],
    58. 
  
  58.       "A": [
    59. 
  
  59.         {
     
    60. 
  
  60.           "name": "阿坝",
    61. 
  
  61.           "key": "A"
    62. 
  
  62.         },
    63. 
  
  63.         {
     
    64. 
  
  64.           "name": "阿拉善",
    65. 
  
  65.           "key": "A"
    66. 
  
  66.         },
    67. 
  
  67.         {
     
    68. 
  
  68.           "name": "阿里",
    69. 
  
  69.           "key": "A"
    70. 
  
  70.         },
    71. 
  
  71.         {
     
    72.
最低0.47元/天 解锁文章
第九程序
关注
专栏目录
微信小程序实现按字母排列选择城市功能
10-15
主要介绍了微信小程序实现按字母排列选择城市功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序实现根据字母选择城市功能
08-29
主要为大家详细介绍了微信小程序中根据字母选择城市的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序，怎么选择地点？
最新发布
m0_74995986的博客
09-23 481
在微信小程序中选择地点，通常会用到微信小程序提供的地图组件（map）或者通过调用微信API来实现，比如使用。权限声明是必须的，因为选择地点通常需要访问用户的地理位置信息。文件中，你可以添加一个按钮用于触发选择地点的操作，并使用。接口让用户选择地点。下面我会提供一个使用。接口实现选择地点的简单示例。文件中，添加一个按钮来触发。首先，你需要在小程序的。
小程序(mpvue)实现按字母排列选择城市
03-01
详解使用请参考：小程序(mpvue)实现按字母排列选择城市 https://www.cnblogs.com/panax/p/14464223.html
微信小程序手把手教你实现带字母索引的城市选择列表
abs625的博客
05-14 9288
微信小程序手把手教你实现带字母索引的城市选择列表前言需求分析左边可滑动列表滑动列表UI实现item点击事件右边带字母的索引条索引条从上到下分别是定位和26个大写字母索引条响应触摸和点击事件索引和列表联动尾巴 前言 在做Android和iOS应用开发的时候，我们经常在app中要用到带字母索引的城市选择功能，他们功能基本都大同小异，大概长下面的样子： 那么在微信小程序(文章后面统称小程序)中我们要怎...
微信小程序实现按首字母检索城市列表
ivneptune的博客
12-12 2055
不说废话，上效果图 因为我有多处要用到，所以我这里是写成自定义组件的，你也可以直接改成在page页面编写： 布局左边一个scroll-view，显示城市列表,右边一个view显示字母列表，城市列表这边有首字母显示，给这个添加这个字母的ID，然后给右边的26个字母添加点击事件，点击的时候获取到点击的是哪个字母，给scroll-view的scroll-into-view赋值相应的字母，它左边就可以跳到相应的地方，再给scroll-view 加一个scroll-with-animation，让它跳转.
小程序实现按字母排列选择城市
weixin_44314803的博客
11-23 1938
小程序实现按字母排列选择城市 实现效果预览 实现思想 利用小程序腾讯地图将所有城市查出来，并将其渲染至页面（https://lbs.qq.com/qqmap_wx_jssdk/index.html）（其中字母栏也根据获取到的数据变化） 其中涉及三个交互（点击字母时滚动到相应位置；滑动触摸字母时，需滚动到相应位置，并有当前哪个字母的提示，且有震动感；手动滑动页面时，需将当前对应的字母选中） 滑动...
微信小程序选择城市
02-22
根据城市的中文名称/拼音/首字母搜索,可得到城市名称，城市编号
微信小程序 城市选择器 城市切换
01-14
微信小程序 城市选择器 城市切换
小程序表单（个人资料编辑）的Demo
03-28
小程序的表单demo，包含姓名、生日选择器、籍贯选择器、等字段功能
微信小程序开发-东航订机票案例源码.zip
08-15
微信小程序开发-东航订机票案例源码.zip
微信小程序 根据拼音排序，自动锚定节点定位当前城市
神尐破
08-17 444
微信小程序 根据拼音排序，自动锚定节点，定位当前位置，如果用于品牌分类字母的 可以不引入map.jsDOM结构：`import qqmap from ‘../../utils/map.js’; //这里的路径看你自己的文件路径
小程序基本命令
aiven1637的博客
10-30 3336
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序实现首字母排序选择功能源码
资源摘要信息:"本资源为一个原生的微信小程序源码项目，具体功能是实现首字母排序选择。微信小程序是基于微信平台的应用程序，开发者可以利用微信提供的API进行开发，无需下载安装即可使用。小程序的开发涉及前端和...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值