小程序城市选择

最新推荐文章于 2023-08-17 16:03:26 发布
最新推荐文章于 2023-08-17 16:03:26 发布
阅读量1.4k 收藏 6
点赞数
分类专栏： 微信小程序 文章标签： 小程序 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44714325/article/details/120035054
版权

最近遇到了一个新的需求，就是在项目中添加城市选择，小程序的城市选择也不是什么难点，网上也有很多的demo，主要是数据格式的不同，总结了一下，基本上属于两种结构。大部分demo都是引入所有的城市，大家在选择测试的时候可能觉得并不方便，所有我把数据抽取了部分出来，大家尝试后可以再对所有城市的数据进行封装，在网络上搜索的话基本上分为两种数据格式，多数如下第一种所示，第二种是根据接口需要更改的格式，同时前端也会使用两种不同的数据格式去渲染。
第一种

 citys: [
    {
      "A": [
        {
          "name": "阿坝",
          "key": "A"
        },
        {
          "name": "阿拉善",
          "key": "A"
        },
      ],
      "B": [
        {
          "name": "北京",
          "key": "B"
        },
        {
          "name": "白银",
          "key": "B"
        },
      ],
      "C": [
        {
          "name": "重庆",
          "key": "C"
        },
        {
          "name": "成都",
          "key": "C"
        },
   ]

在这里插入图片描述

  • WXML
<scroll-view scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">
  <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName" wx:key="{{idx}}">
    <text id="{{idx}}" class="list_tit">{{idx}}</text>
    <block wx:for="{{cityName}}">
      <view class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}</view>
    </block>
  </block>
</scroll-view>
<!--城市选择列表-->
<view class="scroll_list" bindtouchstart="chStart" bindtouchend="chEnd" 
style="background: rgba(0,0,0,{{trans}});">
 <view class="right-title">历史</view>
 <view class="right-title">热门</view>
  <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName" wx:key="{{idx}}">
      <view id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:24rpx;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}</view>
  </block>
</view>

<!--选择显示-->
<view hidden="{{hidden}}" class="showwords">
  {{showwords}}
</view>
  • WXSS

/*城市列表*/
.city_list {
    position: relative;
}

/*城市选择头部*/
.list_tit {
    display: block;
    line-height: 40px;
    height: 40px;
    padding-left: 15px;
    font-size: 16ppx;
    background: #f5f5f5;
    color: #666;
}
.list_item {
    height: 40px;
    /*border-top: 1px #f5f5f5 solid ;*/
    line-height: 40px;
    font-size: 16px;
    padding-left: 15px;
}
.list_item::before {
    content: " ";
    height: 1px;
    border-top: 1px #f5f5f5 solid;
    position: absolute;
    width: 100%;
}
.list_item::before:nth-child(1) {
    border: none;
}
/*城市选择 右边*/
.scroll_list {
    background: rgba(0,0,0,0);
    position: absolute;
    width: 46rpx;
    top: 100rpx;
    right: 10px;
}
.scroll_list_chi {
    text-align: center;
    font-size: 22rpx;
    color: rgb(99, 99, 99)
}
.right-title{
  font-size:24rpx;
  width:80rpx;
}
/*显示框*/
.showwords {
    width: 80px;
    height: 80px;
    background: rgba(0,0,0,.3);
    border-radius:50%;
    line-height: 80px;
    text-align: center;
    font-size:10vw;
    margin: auto;
    position: absolute;
    top: 0;left: 0;bottom: 0;right: 0;
    z-index: 999;   
}
  • JS
    city1封装的数据我会放在页面的最下方
//先引用城市数据文件
var city = require('../../utils/city1.js')
var lineHeight = 0;
var endWords = "";
var isNum;
Page({
  data: {
    "hidden": true,
    cityName: "", //获取选中的城市名
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
  },
/**
 * 生命周期函数--监听页面初次渲染完成
 */
  onReady: function() {
    //初始化封装的城市数据
    var cityChild = city.City[0];
    console.log(cityChild)
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        //lineHeight是右侧A B C D的行高，这个可以根据需要自行设置，我在第二个demo中重新设置
        lineHeight = (res.windowHeight - 100) / 22;
        console.log(res.windowHeight - 100)
        that.setData({
          city: cityChild,
          winHeight: res.windowHeight-2,
          lineHeight: lineHeight
        })
      }
    })
  },

  //触发全部开始选择
  chStart: function() {
    console.log('触发全部开始选择')
    //trans是代表右侧字母列表背景的透明度，在演示中可以看到效果，
    //点击右侧列表时呈现灰色背景，点击结束后透明度为0,同时显示页面最下面定义的showWords的显示
    this.setData({
      trans: ".3",
      hidden: false
    })
  },
  //触发结束选择
  chEnd: function() {
    console.log('触发结束选择')
    this.setData({
      trans: "0",
      hidden: true,
      scrollTopId: this.endWords
    })
  },
  //获取文字信息
  getWords: function(e) {
    console.log('获取文字信息')
    var id = e.target.id;
    this.endWords = id;
    isNum = id;
    this.setData({
      showwords: this.endWords
    })
  },
  //设置文字信息
  setWords: function(e) {
    console.log('设置文字信息')
    var id = e.target.id;
    this.setData({
      scrollTopId: id
    })
  },
  //选择城市，并让选中的值显示在文本框里
  bindCity: function(e) {
    console.log(e.currentTarget.dataset.city);
    var cityName = e.currentTarget.dataset.city;
    wx.showToast({
      title: '您选择了' + cityName,
    })
  }
})

第二种

  citys: [{
        "name": "A",
        "list": [{
            "cityCode": "320001",
            "cityName": "阿坝"
          },
          {
            "cityCode": "320002",
            "cityName": "阿拉善"
          },
        ]
      },
      {
        "name": "B",
        "list": [{
          "cityCode": "130600",
          "cityName": "保定市"
        }]
      },
      {
        "name": "C",
        "list": [{
          "cityCode": "130800",
          "cityName": "承德市"
        }]
      },

数据格式二演示效果

在这里插入图片描述

  • WXML
<scroll-view class="flex-left" scroll-y="true" scroll-into-view="{{scrollIntoId}}">
  <view class='top-module'>
    <view class='top-inner-box'>
      <view class='hot-city-title'>国内热门城市</view>
      <view class='list-one-line'>
        <view class='one-box' wx:for="{{hotCitys}}" data-index="{{index}}" class="{{((index+1)%3) !=0 ?'one-box':'one-box-last'}}" catchtap='selectHotCity'>{{item.cityName}}</view>
      </view>
    </view>
  </view>
  <view wx:for="{{citys}}" wx:key="zimu" wx:for-index="bigindex" wx:for-item="zimu" class='city-list' catchtap='selectCity'>
    <view class="item-title item-a" id="{{zimu.name}}" data-bigindex="{{bigindex}}">{{zimu.name}}</view>
    <view class="item" wx:for="{{zimu.list}}" wx:key="item" wx:for-item="item" data-bigindex="{{bigindex}}" data-item="{{zimu}}" data-index='{{index}}'>{{item.cityName}}</view>
  </view>
</scroll-view>
  <view class="scroll_list" style='margin-top:{{(100-2.8*(citys.length))/4}}vh'>
    <view class="scroll_list_chi">热</view>
    <view wx:for="{{citys}}" wx:key="zimu" wx:for-index="bigindex" wx:for-item="zimu" bindtouchstart="touchstartfn">
      <view class="scroll_list_chi" data-id="{{zimu.name}}" data-bigindex="{{bigindex}}" data-index='{{index}}'>{{zimu.name}}</view>
    </view>
  </view>
  • WXSS
/**index.wxss**/
page{
  background: #F4F4F4;
}
.top-module{
  width: 100vw;
  height: auto;
}
.top-inner-box{
  width: 96vw;
   height: auto;
  padding-left: 2vw;
  padding-right: 2vw;
 background: white;
}
.hot-city-title{
  height: 8vh;
  line-height: 8vh;
}
.list-one-line{
   height: auto;
  width: 84vw;
  margin-left: 2vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.one-box{
 height: 5vh;
  width:25vw;
  margin-right: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border:1rpx solid rgb(233, 232, 232);
  margin-bottom: 1.4vh;
}
.one-box-last{
   height: 5vh;
  width:25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border:1rpx solid rgb(233, 232, 232);
  margin-bottom: 1.4vh;
}
page{
  height: 100%;
}
.zimu{
  width: 50rpx;
  height: 20px;
  line-height: 20px;
} 
.zimulist{
  position: fixed;
  top: 0;
  right: 0;
  bottom:0;
  width: 50rpx;
  z-index: 999999999999;
  background-color: #fff;
  text-align: center;
}
.item-title{
  height: 48rpx;
  line-height: 48rpx;
  border-bottom: solid 1rpx #f0f1f2;
 padding-left: 2vw;
  color: #9A9A9A;
}
.item{
  height:80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #D9D9D9;
 margin-left: 3vw;
}
.item-a{
  background-color: #f0f1f2;
}
.flex-wrap{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
.flex-left{
  width: 100vw;
  height: 100%;
}
.flex-right{
  width: 50rpx;
  height: 100%;
}
/*城市选择 右边*/
.scroll_list {
    background: rgba(0,0,0,0);
    position: absolute;
    width: 46rpx;
    top: 100rpx;
    right: 6rpx;
}
.city-list{
  background: white;
}
.scroll_list_chi {
    text-align: center;
    font-size: 24rpx;
    color: rgb(39, 39, 39);
    height: 2.4vh;
}
.top-module>view{
  font-size: 28rpx;
}
.city-list>view{
  font-size: 28rpx;
}
  • JS
var app = getApp()
Page({
  data: {
    scrollIntoId: '',
    hotCitys: [{
        "cityCode": "130600",
        "cityName": "保定市"
      },
      {
        "cityCode": "140100",
        "cityName": "太原市"
      },
      {
        "cityCode": "150300",
        "cityName": "乌海市"
      },
      {
        "cityCode": "140400",
        "cityName": "长治市"
      },
      {
        "cityCode": "320100",
        "cityName": "南京市"
      },
      {
        "cityCode": "310000",
        "cityName": "上海市"
      }
    ],
    citys: [{
        "name": "A",
        "list": [{
            "cityCode": "320001",
            "cityName": "阿坝"
          },
          {
            "cityCode": "320002",
            "cityName": "阿拉善"
          },
          {
            "cityCode": "320003",
            "cityName": "阿里"
          },
          {
            "cityCode": "320004",
            "cityName": "安康"
          },
        ]
      },

      {
        "name": "B",
        "list": [{
          "cityCode": "130600",
          "cityName": "保定市"
        }]
      },
      {
        "name": "C",
        "list": [{
          "cityCode": "130800",
          "cityName": "承德市"
        }]
      },
      {
        "name": "H",
        "list": [{
            "cityCode": "131100",
            "cityName": "衡水市"
          },
          {
            "cityCode": "320800",
            "cityName": "淮安市"
          }
        ]
      },
      {
        "name": "M",
        "list": [{
          "cityCode": "231000",
          "cityName": "牡丹江市"
        }]
      },
      {
        "name": "N",
        "list": [{
          "cityCode": "320100",
          "cityName": "南京市"
        }]
      },
      {
        "name": "Q",
        "list": [{
          "cityCode": "130300",
          "cityName": "秦皇岛市"
        }]
      },
      {
        "name": "S",
        "list": [{
            "cityCode": "310000",
            "cityName": "上海市"
          },
          {
            "cityCode": "130100",
            "cityName": "石家庄市"
          },
          {
            "cityCode": "320500",
            "cityName": "苏州市"
          }
        ]
      },
      {
        "name": "T",
        "list": [{
            "cityCode": "140100",
            "cityName": "太原市"
          },
          {
            "cityCode": "130200",
            "cityName": "唐山市"
          }
        ]
      },
      {
        "name": "W",
        "list": [{
          "cityCode": "150300",
          "cityName": "乌海市"
        }]
      },
      {
        "name": "X",
        "list": [{
          "cityCode": "320300",
          "cityName": "徐州市"
        }]
      },
      {
        "name": "Y",
        "list": [{
            "cityCode": "320900",
            "cityName": "盐城市"
          },
          {
            "cityCode": "321000",
            "cityName": "扬州市"
          },
          {
            "cityCode": "140300",
            "cityName": "阳泉市"
          }
        ]
      },
      {
        "name": "Z",
        "list": [{
            "cityCode": "140400",
            "cityName": "长治市"
          },
          {
            "cityCode": "321100",
            "cityName": "镇江市"
          }
        ]
      }
    ],
  },

  onShow: function() {

  },
  /**
   * 右侧字母索引的触发
   */
  touchstartfn: function (e) {
    //console.log(e.target.id)
    console.log(e);
    var letter = e.target.dataset.id
    var index = e.target.dataset.bigindex
    var letter = this.data.citys[index].name
    this.setData({
      scrollIntoId: letter
    })
    wx.showToast({
      icon: 'none',
      title: letter
    })
  },

  // 选择热门城市
  selectHotCity: function(e) {
    var that = this
    console.log(e.currentTarget.dataset.index)   //获取点击事件列表的索引
    var index = e.currentTarget.dataset.index
    var cityName = that.data.hotCitys[index].cityName   //根据索引找到热门城市的名称
    var cityCode = that.data.hotCitys[index].cityCode    //根据索引找到热门城市的code编码
    wx.showToast({
      title: cityName,
    })
  },

  //选择城市
  selectCity: function(e) {
    console.log(e)
    var bigIndex = e.target.dataset.bigindex     //嵌套循环找出外部的索引
    var index = e.target.dataset.index               //嵌套循环找出子索引
    var zimu = this.data.citys[bigIndex].name   //找到对应的字母
    console.log(index)
    console.log(zimu)
    if (index == undefined) {         //如果子索引为未定义，即点击了列表中的字母
      wx.showToast({
        title: zimu,
      })
    } else {                        //如果自索引有值，即点击了列表中的城市项
      var cityName = this.data.citys[bigIndex].list[index].cityName   //双重索引找到城市名称
      var cityCode = this.data.citys[bigIndex].list[index].cityCode     //双重索引找到城市编码
      wx.showToast({
        title: cityName,
      })
    }
  },
})
  • 补充第一种方法封装的城市JS
var city = {
  "City": [{
    "A": [{
        "name": "阿坝",
        "key": "A"
      },
      {
        "name": "阿拉善",
        "key": "A"
      },
      {
        "name": "阿里",
        "key": "A"
      },
      {
        "name": "安康",
        "key": "A"
      },
      {
        "name": "安庆",
        "key": "A"
      },
      {
        "name": "鞍山",
        "key": "A"
      },
      {
        "name": "安顺",
        "key": "A"
      },
      {
        "name": "安阳",
        "key": "A"
      },
      {
        "name": "澳门",
        "key": "A"
      }
    ],
    "B": [{
        "name": "北京",
        "key": "B"
      },
      {
        "name": "白银",
        "key": "B"
      },
      {
        "name": "保定",
        "key": "B"
      },
      {
        "name": "宝鸡",
        "key": "B"
      },
      {
        "name": "保山",
        "key": "B"
      },
      {
        "name": "包头",
        "key": "B"
      },
      {
        "name": "巴中",
        "key": "B"
      },
      {
        "name": "北海",
        "key": "B"
      },
      {
        "name": "蚌埠",
        "key": "B"
      },
      {
        "name": "本溪",
        "key": "B"
      },
      {
        "name": "毕节",
        "key": "B"
      },
      {
        "name": "滨州",
        "key": "B"
      },
      {
        "name": "百色",
        "key": "B"
      },
      {
        "name": "亳州",
        "key": "B"
      }
    ],
    "C": [{
        "name": "重庆",
        "key": "C"
      },
      {
        "name": "成都",
        "key": "C"
      },
      {
        "name": "长沙",
        "key": "C"
      },
      {
        "name": "长春",
        "key": "C"
      },
      {
        "name": "沧州",
        "key": "C"
      },
      {
        "name": "常德",
        "key": "C"
      },
      {
        "name": "昌都",
        "key": "C"
      },
      {
        "name": "长治",
        "key": "C"
      },
      {
        "name": "常州",
        "key": "C"
      },
      {
        "name": "巢湖",
        "key": "C"
      },
      {
        "name": "潮州",
        "key": "C"
      },
      {
        "name": "承德",
        "key": "C"
      },
      {
        "name": "郴州",
        "key": "C"
      },
      {
        "name": "赤峰",
        "key": "C"
      },
      {
        "name": "池州",
        "key": "C"
      },
      {
        "name": "崇左",
        "key": "C"
      },
      {
        "name": "楚雄",
        "key": "C"
      },
      {
        "name": "滁州",
        "key": "C"
      },
      {
        "name": "朝阳",
        "key": "C"
      }
    ],
    "D": [{
        "name": "大连",
        "key": "D"
      },
      {
        "name": "东莞",
        "key": "D"
      },
      {
        "name": "大理",
        "key": "D"
      },
      {
        "name": "丹东",
        "key": "D"
      },
      {
        "name": "大庆",
        "key": "D"
      },
      {
        "name": "大同",
        "key": "D"
      },
      {
        "name": "大兴安岭",
        "key": "D"
      },
      {
        "name": "德宏",
        "key": "D"
      },
      {
        "name": "德阳",
        "key": "D"
      },
      {
        "name": "德州",
        "key": "D"
      },
      {
        "name": "定西",
        "key": "D"
      },
      {
        "name": "迪庆",
        "key": "D"
      },
      {
        "name": "东营",
        "key": "D"
      }

    ],
    "E": [{
        "name": "鄂尔多斯",
        "key": "E"
      },
      {
        "name": "恩施",
        "key": "E"
      },
      {
        "name": "鄂州",
        "key": "E"
      }
    ],
    "F": [{
        "name": "福州",
        "key": "F"
      },
      {
        "name": "防城港",
        "key": "F"
      },
      {
        "name": "佛山",
        "key": "F"
      },
      {
        "name": "抚顺",
        "key": "F"
      },
      {
        "name": "抚州",
        "key": "F"
      },
      {
        "name": "阜新",
        "key": "F"
      },
      {
        "name": "阜阳",
        "key": "F"
      }
    ],
    "G": [{
        "name": "广州",
        "key": "G"
      },
      {
        "name": "赣州",
        "key": "G"
      },
      {
        "name": "桂林",
        "key": "G"
      },
      {
        "name": "贵阳",
        "key": "G"
      },
      {
        "name": "甘南",
        "key": "G"
      },

      {
        "name": "甘孜",
        "key": "G"
      },
      {
        "name": "广安",
        "key": "G"
      },
      {
        "name": "广元",
        "key": "G"
      },
      {
        "name": "果洛",
        "key": "G"
      },
      {
        "name": "贵港",
        "key": "G"
      }

    ],

    "H": [{
        "name": "杭州",
        "key": "H"
      },
      {
        "name": "哈尔滨",
        "key": "H"
      },
      {
        "name": "合肥",
        "key": "H"
      },
      {
        "name": "海口",
        "key": "H"
      },
      {
        "name": "海东",
        "key": "H"
      },
      {
        "name": "海北",
        "key": "H"
      },
      {
        "name": "海南",
        "key": "H"
      },
      {
        "name": "海西",
        "key": "H"
      },
      {
        "name": "邯郸",
        "key": "H"
      }

      ,
      {
        "name": "汉中",
        "key": "H"
      },
      {
        "name": "鹤壁",
        "key": "H"
      },
      {
        "name": "河池",
        "key": "H"
      },
      {
        "name": "鹤岗",
        "key": "H"
      },
      {
        "name": "黑河",
        "key": "H"
      },
      {
        "name": "衡水",
        "key": "H"
      },
      {
        "name": "衡阳",
        "key": "H"
      }

      ,
      {
        "name": "河源",
        "key": "H"
      },
      {
        "name": "贺州",
        "key": "H"
      },
      {
        "name": "红河",
        "key": "H"
      },
      {
        "name": "淮安",
        "key": "H"
      },
      {
        "name": "淮北",
        "key": "H"
      },
      {
        "name": "怀化",
        "key": "H"
      },
      {
        "name": "淮南",
        "key": "H"
      },

      {
        "name": "黄冈",
        "key": "H"
      },
      {
        "name": "黄南",
        "key": "H"
      },
      {
        "name": "黄山",
        "key": "H"
      },
      {
        "name": "黄石",
        "key": "H"
      },
      {
        "name": "惠州",
        "key": "H"
      },
      {
        "name": "葫芦岛",
        "key": "H"
      },
      {
        "name": "呼伦贝尔",
        "key": "H"
      },
      {
        "name": "湖州",
        "key": "H"
      },
      {
        "name": "菏泽",
        "key": "H"
      }

    ],
    "J": [

      {
        "name": "济南",
        "key": "J"
      },
      {
        "name": "佳木斯",
        "key": "J"
      },
      {
        "name": "吉安",
        "key": "J"
      },
      {
        "name": "江门",
        "key": "J"
      },
      {
        "name": "焦作",
        "key": "J"
      },
      {
        "name": "嘉兴",
        "key": "J"
      },
      {
        "name": "嘉峪关",
        "key": "J"
      },
      {
        "name": "揭阳",
        "key": "J"
      },

      {
        "name": "吉林",
        "key": "J"
      },
      {
        "name": "金昌",
        "key": "J"
      },
      {
        "name": "晋城",
        "key": "J"
      },
      {
        "name": "景德镇",
        "key": "J"
      },
      {
        "name": "荆门",
        "key": "J"
      },
      {
        "name": "荆州",
        "key": "J"
      },
      {
        "name": "金华",
        "key": "J"
      }

      ,
      {
        "name": "济宁",
        "key": "J"
      },
      {
        "name": "晋中",
        "key": "J"
      },
      {
        "name": "锦州",
        "key": "J"
      },
      {
        "name": "九江",
        "key": "J"
      },
      {
        "name": "酒泉",
        "key": "J"
      }
    ],
    "K": [{
        "name": "昆明",
        "key": "K"

      },
      {

        "name": "开封",
        "key": "K"
      }
    ],

    "L": [{
        "name": "兰州",
        "key": "L"
      },
      {
        "name": "拉萨",
        "key": "L"
      },
      {
        "name": "来宾",
        "key": "L"
      },
      {
        "name": "莱芜",
        "key": "L"
      },
      {
        "name": "廊坊",
        "key": "L"
      },
      {
        "name": "乐山",
        "key": "L"
      },
      {
        "name": "凉山",
        "key": "L"
      },
      {
        "name": "连云港",
        "key": "L"
      }

      ,
      {
        "name": "聊城",
        "key": "L"
      }

      ,
      {
        "name": "辽阳",
        "key": "L"
      },
      {
        "name": "辽源",
        "key": "L"
      },
      {
        "name": "丽江",
        "key": "L"
      },
      {
        "name": "临沧",
        "key": "L"
      },
      {
        "name": "临汾",
        "key": "L"
      },
      {
        "name": "临夏",
        "key": "L"
      },

      {
        "name": "临沂",
        "key": "L"
      }

      ,
      {
        "name": "林芝",
        "key": "L"
      },
      {
        "name": "丽水",
        "key": "L"
      },
      {
        "name": "六安",
        "key": "L"
      },
      {
        "name": "六盘水",
        "key": "L"
      },
      {
        "name": "柳州",
        "key": "L"
      },
      {
        "name": "陇南",
        "key": "L"
      },

      {
        "name": "龙岩",
        "key": "L"
      },

      {
        "name": "娄底",
        "key": "L"
      },
      {
        "name": "漯河",
        "key": "L"
      },
      {
        "name": "洛阳",
        "key": "L"
      },
      {
        "name": "泸州",
        "key": "L"
      },
      {
        "name": "吕梁",
        "key": "L"
      }

    ],

    "M": [{
        "name": "马鞍山",
        "key": "M"
      },
      {
        "name": "茂名",
        "key": "M"
      },
      {
        "name": "眉山",
        "key": "M"
      },
      {
        "name": "梅州",
        "key": "M"
      },
      {
        "name": "绵阳",
        "key": "M"
      },
      {
        "name": "牡丹江",
        "key": "M"
      }

    ],
    "N": [

      {
        "name": "南京",
        "key": "N"
      },
      {
        "name": "南昌",
        "key": "N"
      },
      {
        "name": "南宁",
        "key": "N"
      },
      {
        "name": "南充",
        "key": "N"
      },
      {
        "name": "南平",
        "key": "N"
      },
      {
        "name": "南通",
        "key": "N"
      },
      {
        "name": "南阳",
        "key": "N"
      },
      {
        "name": "那曲",
        "key": "N"
      }

      ,
      {
        "name": "内江",
        "key": "N"
      },
      {
        "name": "宁德",
        "key": "N"
      },
      {
        "name": "怒江",
        "key": "N"
      }


    ],
    "P": [

      {
        "name": "盘锦",
        "key": "P"
      },
      {
        "name": "攀枝花",
        "key": "P"
      },
      {
        "name": "平顶山",
        "key": "P"
      },
      {
        "name": "平凉",
        "key": "P"
      },
      {
        "name": "萍乡",
        "key": "P"
      },
      {
        "name": "莆田",
        "key": "P"
      },
      {
        "name": "濮阳",
        "key": "P"
      }

    ],
    "Q": [

      {
        "name": "青岛",
        "key": "Q"
      },
      {
        "name": "黔东南",
        "key": "Q"
      },
      {
        "name": "黔南",
        "key": "Q"
      },
      {
        "name": "黔西南",
        "key": "Q"
      },
      {
        "name": "庆阳",
        "key": "Q"
      },
      {
        "name": "清远",
        "key": "Q"
      },
      {
        "name": "秦皇岛",
        "key": "Q"
      },
      {
        "name": "钦州",
        "key": "Q"
      },
      {
        "name": "齐齐哈尔",
        "key": "Q"
      },
      {
        "name": "泉州",
        "key": "Q"
      },
      {
        "name": "曲靖",
        "key": "Q"
      },
      {
        "name": "衢州",
        "key": "Q"
      }


    ],

    "R": [{
        "name": "日喀则",
        "key": "R"
      },
      {
        "name": "日照",
        "key": "R"
      }
    ],

    "S": [{
        "name": "上海",
        "key": "S"
      },
      {
        "name": "深圳",
        "key": "S"
      },
      {
        "name": "苏州",
        "key": "S"
      },
      {
        "name": "沈阳",
        "key": "S"
      },
      {
        "name": "石家庄",
        "key": "S"
      },
      {
        "name": "三门峡",
        "key": "S"
      },
      {
        "name": "三明",
        "key": "S"
      },
      {
        "name": "三亚",
        "key": "S"
      }

      ,
      {
        "name": "商洛",
        "key": "S"
      }

      ,
      {
        "name": "商丘",
        "key": "S"
      },
      {
        "name": "上饶",
        "key": "S"
      },
      {
        "name": "山南",
        "key": "S"
      },
      {
        "name": "汕头",
        "key": "S"
      },
      {
        "name": "汕尾",
        "key": "S"
      },
      {
        "name": "韶关",
        "key": "S"
      },

      {
        "name": "绍兴",
        "key": "S"
      }

      ,
      {
        "name": "邵阳",
        "key": "S"
      },
      {
        "name": "十堰",
        "key": "S"
      },
      {
        "name": "朔州",
        "key": "S"
      },
      {
        "name": "四平",
        "key": "S"
      },
      {
        "name": "绥化",
        "key": "S"
      },
      {
        "name": "遂宁",
        "key": "S"
      },

      {
        "name": "随州",
        "key": "S"
      },

      {
        "name": "娄底",
        "key": "S"
      },
      {
        "name": "宿迁",
        "key": "S"
      },
      {
        "name": "宿州",
        "key": "S"
      }

    ],
    "T": [

      {
        "name": "天津",
        "key": "T"
      },
      {
        "name": "太原",
        "key": "T"
      },
      {
        "name": "泰安",
        "key": "T"
      },
      {
        "name": "泰州",
        "key": "T"
      },
      {
        "name": "唐山",
        "key": "T"
      },
      {
        "name": "天水",
        "key": "T"
      },
      {
        "name": "铁岭",
        "key": "T"
      },
      {
        "name": "铜川",
        "key": "T"
      },

      {
        "name": "通化",
        "key": "T"
      },
      {
        "name": "通辽",
        "key": "T"
      },
      {
        "name": "铜陵",
        "key": "T"
      },
      {
        "name": "铜仁",
        "key": "T"
      },
      {
        "name": "台湾",
        "key": "T"
      }


    ],
    "W": [

      {
        "name": "武汉",
        "key": "W"
      },
      {
        "name": "乌鲁木齐",
        "key": "W"
      },
      {
        "name": "无锡",
        "key": "W"
      },
      {
        "name": "威海",
        "key": "W"
      },
      {
        "name": "潍坊",
        "key": "W"
      },
      {
        "name": "文山",
        "key": "W"
      },
      {
        "name": "温州",
        "key": "W"
      },
      {
        "name": "乌海",
        "key": "W"
      },

      {
        "name": "芜湖",
        "key": "W"
      },
      {
        "name": "乌兰察布",
        "key": "W"
      },
      {
        "name": "武威",
        "key": "W"
      },
      {
        "name": "梧州",
        "key": "W"
      }

    ],
    "X": [

      {
        "name": "厦门",
        "key": "X"
      },
      {
        "name": "西安",
        "key": "X"
      },
      {
        "name": "西宁",
        "key": "X"
      },
      {
        "name": "襄樊",
        "key": "X"
      },
      {
        "name": "湘潭",
        "key": "X"
      },
      {
        "name": "湘西",
        "key": "X"
      },
      {
        "name": "咸宁",
        "key": "X"
      },
      {
        "name": "咸阳",
        "key": "X"
      },

      {
        "name": "孝感",
        "key": "X"
      },
      {
        "name": "邢台",
        "key": "X"
      },
      {
        "name": "新乡",
        "key": "X"
      },
      {
        "name": "信阳",
        "key": "X"
      },
      {
        "name": "新余",
        "key": "X"
      },
      {
        "name": "忻州",
        "key": "X"
      },
      {
        "name": "西双版纳",
        "key": "X"
      }

      ,
      {
        "name": "宣城",
        "key": "X"
      },

      {
        "name": "许昌",
        "key": "X"
      },
      {
        "name": "徐州",
        "key": "X"
      },
      {
        "name": "香港",
        "key": "X"
      },
      {
        "name": "锡林郭勒",
        "key": "X"
      },
      {
        "name": "兴安",
        "key": "X"
      }
    ],
    "Y": [

      {
        "name": "银川",
        "key": "Y"
      },
      {
        "name": "雅安",
        "key": "Y"
      },
      {
        "name": "延安",
        "key": "Y"
      },
      {
        "name": "延边",
        "key": "Y"
      },
      {
        "name": "盐城",
        "key": "Y"
      },
      {
        "name": "阳江",
        "key": "Y"
      },

      {
        "name": "阳泉",
        "key": "Y"
      },
      {
        "name": "扬州",
        "key": "Y"
      },

      {
        "name": "烟台",
        "key": "Y"
      },
      {
        "name": "宜宾",
        "key": "Y"
      },
      {
        "name": "宜昌",
        "key": "Y"
      },
      {
        "name": "宜春",
        "key": "Y"
      },
      {
        "name": "营口",
        "key": "Y"
      },

      {
        "name": "益阳",
        "key": "Y"
      },
      {
        "name": "永州",
        "key": "Y"
      }

      ,
      {
        "name": "岳阳",
        "key": "Y"
      },

      {
        "name": "榆林",
        "key": "Y"
      },
      {
        "name": "运城",
        "key": "Y"
      },
      {
        "name": "云浮",
        "key": "Y"
      },
      {
        "name": "玉树",
        "key": "Y"
      },
      {
        "name": "玉溪",
        "key": "Y"
      },
      {
        "name": "玉林",
        "key": "Y"
      }

    ],

    "Z": [{
        "name": "杂多县",
        "key": "Z"
      },
      {
        "name": "赞皇县",
        "key": "Z"
      },
      {
        "name": "枣强县",
        "key": "Z"
      },
      {
        "name": "枣阳市",
        "key": "Z"
      },
      {
        "name": "枣庄",
        "key": "Z"
      },
      {
        "name": "泽库县",
        "key": "Z"
      },
      {
        "name": "增城市",
        "key": "Z"
      },

      {
        "name": "曾都区",
        "key": "Z"
      },
      {
        "name": "泽普县",
        "key": "Z"
      }

      ,
      {
        "name": "泽州县",
        "key": "Z"
      },
      {
        "name": "札达县",
        "key": "Z"
      },
      {
        "name": "扎赉特旗",
        "key": "Z"
      },
      {
        "name": "扎兰屯市",
        "key": "Z"
      },
      {
        "name": "扎鲁特旗",
        "key": "Z"
      },

      {
        "name": "扎囊县",
        "key": "Z"
      },
      {
        "name": "张北县",
        "key": "Z"
      }

      ,
      {
        "name": "张店区",
        "key": "Z"
      },
      {
        "name": "章贡区",
        "key": "Z"
      },
      {
        "name": "张家港",
        "key": "Z"
      },
      {
        "name": "张家界",
        "key": "Z"
      },
      {
        "name": "张家口",
        "key": "Z"
      },
      {
        "name": "漳平市",
        "key": "Z"
      },

      {
        "name": "漳浦县",
        "key": "Z"
      },

      {
        "name": "章丘市",
        "key": "Z"
      },
      {
        "name": "樟树市",
        "key": "Z"
      },
      {
        "name": "张湾区",
        "key": "Z"
      },
      {
        "name": "彰武县",
        "key": "Z"
      },
      {
        "name": "漳县",
        "key": "Z"
      },
      {
        "name": "张掖",
        "key": "Z"
      },
      {
        "name": "漳州",
        "key": "Z"
      },
      {
        "name": "长子县",
        "key": "Z"
      },

      {
        "name": "湛河区",
        "key": "Z"
      },
      {
        "name": "湛江",
        "key": "Z"
      },

      {
        "name": "站前区",
        "key": "Z"
      },
      {
        "name": "沾益县",
        "key": "Z"
      },
      {
        "name": "诏安县",
        "key": "Z"
      },
      {
        "name": "召陵区",
        "key": "Z"
      },
      {
        "name": "昭平县",
        "key": "Z"
      },
      {
        "name": "肇庆",
        "key": "Z"
      },
      {
        "name": "昭通",
        "key": "Z"
      },
      {
        "name": "赵县",
        "key": "Z"
      }
    ]
  }]
}
module.exports = city;
头发超多的程序媛
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实战—实现城市列表的选择
yyf的博客
01-19 2万+
微信小程序实战—实现城市列表的选择 实现效果预览 实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json {
微信小程序 城市选择组件 城市选择器
10-13
微信小程序里面，需要用到城市选择地地方，通过调用城市选择器的组件，供页面选择城市
微信小程序实现城市列表选择
08-27
主要为大家详细介绍了微信小程序实现城市列表选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序基本命令
aiven1637的博客
10-30 3277
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序选择市，区县
a_靖的博客
05-30 7300
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 微信小程序选择市，区县的实现 demo的需求是 做一个两列选择器，选择江西省范围内的所有市以及区县，滑动到每个城市 自动匹配出它的区县并赋值到第二列，用户选择完以后验证选中的区县是否匹配。（因为自动匹配出第二列的区县需要一点时间，用户滑动第一列市快的话会出现市和区县不匹配的解决方法） 滚动选择器 ...
【微信小程序】自定义省市区数据
悟空—
06-13 1573
使用 文件管理及文件下载 api 下载数据并使用setDataArea方法处理数据 （locations location 更改初始化的数据格式）获取省市区数据 ：由于小程序包大小限制 则放在了线上 通过下载到本地保存再使用（文件下载本地并使用可参考另外一篇文章）自定义省市区数据 region 自定义数据使用的name range-key。列数据改变触发 bindcolumnchange 计算下一列数据。由于特殊人员不行情况 需要前端自己搞省市区数据 则冲吧！赋值 bindchange。
微信小程序 城市选择器 城市切换
01-14
在微信小程序开发中，城市选择器（City Picker）是一个常用的功能组件，主要用于用户在应用内进行城市或地区的筛选与切换。这个组件对于提供基于地理位置的服务，如外卖、出行、生活服务等，至关重要。本篇文章将...
微信小程序仿美团城市选择
08-27
【微信小程序仿美团城市选择】知识点详解 微信小程序在开发过程中，经常需要实现类似美团城市选择的功能，以方便用户快速定位到自己所在的城市或者选择想去的城市。本篇将详细介绍如何在微信小程序中创建一个仿美团...
微信小程序城市选择器
04-03
本项目提供的“微信小程序城市选择器”是一个已经应用于正式项目并经过验证的组件，确保了其稳定性和可用性。 在微信小程序的开发中，用户界面（UI）和用户体验（UX）是非常重要的部分，城市选择器作为一个交互频繁...
小程序-基于vant的Picker组件实现省市区选择
u014678583的博客
08-17 4572
以高德gaode-area.json为例，点击就可以下载高德省市区数据（包含压缩和未压缩的）刚开始看文档这个结构一时没有理解，有点懵，后面经过研究发现需要如下结构。因为想减少小程序的体积，故把文件丢到服务器上了。
uniapp选择城市功能
weixin_47586598的博客
03-01 1344
uniapp选择城市功能
微信小程序实现城市索引选择+搜索
aaa123aaasqw的博客
05-11 1006
当前选中位置高度Height=pageY-侧边栏本身距离左上角高度（res.windowWidth / 750 * 180 （rpx，该高度为top：180rpx））搜索城市时，隐藏其他数据，根据搜索值去匹配（indexOf）去匹配关键字，将结果push到一个新的数组中，展示该数组数据。为列表中的字母索引添加相应id，当触摸右侧固定侧边栏时候，动态设置当前id值，实现锚点定位。设置哪个方向可滚动，则在哪个方向滚动到该元素。当触摸开始，移动时，拿到pageY，距离左上角的高度。
微信小程序 通过 vant 实现选择城市
m0_63281943的博客
11-29 1340
新建 utlis > city.js。city.js 数据源配置 导出。
uni-app开发微信小程序使用腾讯地图选点和城市选择器插件
铁锤妹妹的博客
09-27 7564
因为开发微信小程序，所以我这里用的是腾讯地图选点插件。附上官方文档腾讯地图选择器插件腾讯地图选点插件。
小程序实现城市选择
GUK
07-17 2003
&lt;view class="search-box"&gt; &lt;input placeholder="中文/拼音/首字母" class='search-input' bindinput='bindSarchInput' placeholder-class='search-input-placeholder' /&gt; &lt;/view&gt; &lt;view class='a-...
小程序实现带索引的城市列表
小马总的博客
06-28 3775
效果 一、城市数据 {"A":[{"id":"210300","name":"鞍山","fullName":"鞍山市","initialsName":"A"},{"id":"340800","name":"安庆","fullName":"安庆市","initialsName":"A"},{"id":"410500","name":"安阳","fullName":"安阳市","initia...
微信小程序手把手教你实现带字母索引的城市选择列表
abs625的博客
05-14 8947
微信小程序手把手教你实现带字母索引的城市选择列表前言需求分析左边可滑动列表滑动列表UI实现item点击事件右边带字母的索引条索引条从上到下分别是定位和26个大写字母索引条响应触摸和点击事件索引和列表联动尾巴 前言 在做Android和iOS应用开发的时候，我们经常在app中要用到带字母索引的城市选择功能，他们功能基本都大同小异，大概长下面的样子： 那么在微信小程序(文章后面统称小程序)中我们要怎...
微信小程序全国城市列表索引开发案例
weixin_33719619的博客
11-24 1635
在一些需求中，我们需要有一个全国城市的列表供我们选择，并且可以获得对应的经纬度坐标。 今天，我们就一起来实现这个需求。 好，我们先看一下我们期望的最终效果，如下图： 我们看到左侧有个下拉选项，右侧是供搜索的输入关键字用到的输入框。 关于搜索的需求可以看这个教程使用高德地图微信小程序SDK开发案例-输入提示（附源码） 我们今天主要实现如下需求： 1.页面布局。 2.进入页面自动定位当前所在的城市。...
html手机城市索引列表,微信小程序全国城市列表索引开发案例
weixin_30899789的博客
06-19 374
在一些需求中，我们需要有一个全国城市的列表供我们选择，并且可以获得对应的经纬度坐标。今天，我们就一起来实现这个需求。好，我们先看一下我们期望的最终效果，如下图：我们看到左侧有个下拉选项，右侧是供搜索的输入关键字用到的输入框。关于搜索的需求可以看这个教程使用高德地图微信小程序SDK开发案例-输入提示(附源码)我们今天主要实现如下需求：1.页面布局。2.进入页面自动定位当前所在的城市。3.获取全国城市...
taro.js微信小程序城市选择列表
最新发布
09-03
Taro.js是一种支持多个小程序平台开发的框架，它提供了一种简洁、高效的方式来创建微信小程序。在Taro.js中，我们可以使用城市选择列表组件来方便地实现城市选择功能。 微信小程序城市选择列表是指用户可以在小程序中选择所在城市的功能。使用Taro.js开发微信小程序时，我们可以通过调用微信小程序提供的定位功能，获取用户所在位置的经纬度信息。然后，我们可以将经纬度信息传递给城市选择列表组件，让用户选择所在城市。 城市选择列表通常包括省份和城市两级下拉菜单。当用户选择省份时，城市列表会动态更新为该省份对应的城市列表。用户可以通过滚动或搜索的方式，在城市列表中选择目标城市。用户选择完成后，我们可以将所选择的城市信息传递给后端服务器，进行进一步的处理。 在Taro.js中，我们可以使用类似以下的代码来实现城市选择列表： ``` import { View, Picker } from '@tarojs/components' const cities = { 北京: ['北京市'], 上海: ['上海市'], 广东: ['广州市', '深圳市', '珠海市', '东莞市'], ... } export default class CitySelector extends Component { state = { province: '', city: '', } handleProvinceChange = e => { const province = e.detail.value const city = cities[province][0] this.setState({ province, city }) } handleCityChange = e => { const city = e.detail.value this.setState({ city }) } render() { const { province, city } = this.state return ( <View> <Picker mode='selector' range={Object.keys(cities)} onChange={this.handleProvinceChange}> <View>{province || '请选择省份'}</View> </Picker> <Picker mode='selector' range={cities[province]} onChange={this.handleCityChange}> <View>{city || '请选择城市'}</View> </Picker> </View> ) } } ``` 以上代码中，我们定义了一个城市选择列表组件`CitySelector`，其中使用了`Picker`组件来实现下拉选择功能。`cities`对象存储了各省份对应的城市列表。当用户选择省份时，触发`handleProvinceChange`函数，在城市列表中显示对应省份的城市。当用户选择城市时，触发`handleCityChange`函数，更新城市信息。最终，用户选择的省份和城市会保存在`state`中，方便后续的数据处理和传递。 通过这样的方式，我们可以在Taro.js微信小程序中实现城市选择列表的功能。希望这个回答能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值