小程序城市选择字母列表

最新推荐文章于 2022-04-04 22:26:19 发布
最新推荐文章于 2022-04-04 22:26:19 发布
阅读量456 收藏
点赞数
原文链接：http://www.cnblogs.com/520BigBear/p/11313244.html
版权

效果图：

代码：

 

<view class="title">
  <!-- <input class="title_list" value="{{cityName}}" placeholder="城市名称" />
  <button>确认</button> -->
  <view style='color:#FE5431;padding:0 0 0 25rpx;' class='iconfont icon-dingwei'> {{cityName}}</view>
</view>
<scroll-view   scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">
    <block wx:for="{{city}}" wx:key wx:for-index="idx" wx:for-item="cityName">
      <text id="{{idx}}" class="list_tit">{{idx}}</text>
      <block wx:for="{{cityName}}" wx:key>
         <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"
      catchtouchmove="chMove"
      style="background: rgba(0,0,0,{{trans}});"
      >
   <block wx:for="{{city}}" wx:key wx:for-index="idx" wx:for-item="cityName">
      <block wx:if="{{idx != '热门城市'}}">
       <view 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}}</view>
      </block>
    </block>
</view>

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

 

/* pages/buycar/choosecity.wxss */
.title {
    position: relative;
    padding: 10px 0;
}
.title_list {
    display: inline-block;
    padding: 0 15px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
}
.title button {
    width: 50px;
    height: 30px;
    font-size: 16px;
    padding: 0;
    line-height: 30px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom:0;
    right: 10px;
    background: none;
}
.title button::after {
    border: none;
}
.title_list:nth-child(1) {
    border-right:1px #ccc solid;
}
/*城市列表*/
.city_list {
    position: relative;
}

/*城市选择头部*/
.list_tit {
    display: block;
    line-height: 40px;
    height: 40px;
    padding-left: 15px;
    font-size: 16ppx;
    background: #f5f5f5;
    color: #666;
}
.list_con {
    height: 40px;
    /*border-top: 1px #f5f5f5 solid ;*/
    line-height: 40px;
    font-size: 16px;
    padding-left: 15px;
}
.list_con::before {
    content: " ";
    height: 1px;
    border-top: 1px #f5f5f5 solid;
    position: absolute;
    width: 100%;
}
.list_con::before:nth-child(1) {
    border: none;
}
/*城市选择 右边*/
.scroll_list {
    background: rgba(0,0,0,0);
    position: absolute;
    height: calc(100% - 100px);
    width: 25px;
    top: 90px;
    right: 10px;
}
.scroll_list_chi {
    /*border: 1px blue solid;*/
    text-align: center;
    font-size: 12px;
}
/*显示框*/

.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;   
}
//先引用城市数据文件
var city = require('../../utils/city.js')
var lineHeight = 0;
var endWords = "";
var isNum;
Page({
  data: {
    "hidden": true,
    cityName: "", //获取选中的城市名

  },
  onLoad: function (options) {
    this.setData({
      cityName: wx.getStorageSync('cityName') == '' ? '全国' : wx.getStorageSync('cityName')
    })
  },
  onReady: function () {
    // 生命周期函数--监听页面初次渲染完成
    var cityChild = city.City[0];
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        lineHeight = (res.windowHeight - 100) / 22;
        console.log(res.windowHeight - 100)
        that.setData({
          city: cityChild,
          winHeight: res.windowHeight - 40,
          lineHeight: lineHeight
        })
      }
    })
  },
  onShow: function () {
    // 生命周期函数--监听页面显示

  },
  onHide: function () {
    // 生命周期函数--监听页面隐藏

  },
  onUnload: function () {
    // 生命周期函数--监听页面卸载

  },
  //触发全部开始选择
  chStart: function () {
    this.setData({
      trans: ".1",
      hidden: false
    })
  },
  //触发结束选择
  chEnd: function () {
    this.setData({
      trans: "0",
      hidden: true,
      scrollTopId: this.endWords
    })
  },
  //获取文字信息
  getWords: function (e) {
    var id = e.target.id;
    this.endWords = id;
    isNum = id;
    this.setData({
      showwords: this.endWords
    })
  },
  //设置文字信息
  setWords: function (e) {
    var id = e.target.id;
    this.setData({
      scrollTopId: id
    })
  },

  // 滑动选择城市
  chMove: function (e) {
    var y = e.touches[0].clientY;
    var offsettop = e.currentTarget.offsetTop;
    var height = 0;
    var that = this;
    ;
    var cityarr = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]
    // 获取y轴最大值
    wx.getSystemInfo({
      success: function (res) {
        height = res.windowHeight - 10;
      }
    });

    //判断选择区域,只有在选择区才会生效
    if (y > offsettop && y < height) {
      // console.log((y-offsettop)/lineHeight)
      var num = parseInt((y - offsettop) / lineHeight);
      endWords = cityarr[num];
      // 这里 把endWords 绑定到this 上，是为了手指离开事件获取值
      that.endWords = endWords;
    };


    //去除重复，为了防止每次移动都赋值 ,这里限制值有变化后才会有赋值操作，
    //DOTO 这里暂时还有问题，还是比较卡，待优化
    if (isNum != num) {
      // console.log(isNum);
      isNum = num;
      that.setData({
        showwords: that.endWords
      })
    }
  },
  //选择城市，并让选中的值显示在文本框里
  bindCity: function (e) {
    console.log(e);
    var cityName = e.currentTarget.dataset.city;
    this.setData({ cityName: cityName })
    wx.setStorageSync('cityName', cityName)
    wx.switchTab({
      url: '/pages/buycar/buycar',
    })
  }

})

city.js:

 

var city = {
  "City": [
    {
      "热门城市": [
        {
          "name": "全国",
          "key": "热门"
        },
        {
          "name": "北京",
          "key": "热门"
        },
        {
          "name": "上海",
          "key": "热门"
        },
        {
          "name": "广州",
          "key": "热门"
        },
        {
          "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"
        }
        ,
        {
          "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;

 

转载于:https://www.cnblogs.com/520BigBear/p/11313244.html

weixin_30339457
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序实现城市列表选择
08-27
主要为大家详细介绍了微信小程序实现城市列表选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序基本命令
aiven1637的博客
10-30 3201
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序-根据城市首字母定位城市列表（包含搜索和热门城市）已封装成组件可以直接用
qq_40679724的博客
08-04 2789
先给大家上效果图： 想上传视频给你们看整体效果的，看了一下好麻烦哦~ 接下来进入正题：文件目录图 废话不多说直接上代码了啊~ city.js文件里是一些配置数据，你们也可以直接写在组件的js文件data里，只是为了给你展示一下，这些城市列表数据按理来说应该都是后端给你返回的，城市列表的首字母展示不一定就是26个字母，也可以根据已有的城市首字母去展示。 // city.js let citylist = [{ "letter": "A", "data": [{ "cityId": "v7", "c
SelectCity 微信小程序选择城市组件
qq_33378937的博客
11-01 4194
SelectCity 微信小程序选择城市组件 项目介绍 在巨人的肩膀上继续制作的我的选择城市代码片段 github 地址 https://github.com/shichuyu/SelectCity 码云地址 https://gitee.com/cjty/SelectCity 安装教程 复制这段链接 wechatide://minicode/cBfbjtmq7q3i 打开微信小程序的导入代码片段...
微信小程序城市列表选择自定义组件
03-11
微信小程序城市选择自定义组件 可设置热门城市 可根据首字母定位城市列表 可动态设置城市列表和筛选字母列表
微信小程序实现根据字母选择城市功能
01-20
今天开发一个小程序，里面涉及到区域选择，看了网上的一些版本，感觉写的不全，有可能是我的理解能力还不够吧。今天我就结合网上的答案，在根据自己的需求，重新整理一份。希望对大家有帮助。先看看截图： 项目截图...
微信小程序实现按字母排列选择城市功能
11-21
利用小程序腾讯地图将所有城市查出来，并将其渲染至页面（https://lbs.qq.com/qqmap_wx_jssdk/index.html）（其中字母栏也根据获取到的数据变化） 其中涉及三个交互（点击字母时滚动到相应位置；滑动触摸字母时，需...
小程序实现带索引的城市列表
小马总的博客
06-28 3677
效果 一、城市数据 {"A":[{"id":"210300","name":"鞍山","fullName":"鞍山市","initialsName":"A"},{"id":"340800","name":"安庆","fullName":"安庆市","initialsName":"A"},{"id":"410500","name":"安阳","fullName":"安阳市","initia...
中国所有城市js文件（按首字母排序）
07-17
对象数组：对象如下，包含name，cityid，tags { name: "北京市", tags: "BEIJING,北京市", cityid: 1 },
微信小程序-微信小程序 城市区县定位选择器 带拼音搜索 可直接使用
08-06
微信小程序 城市/区县定位选择器 主要功能 自动定位 城市、区县（也支持手动） 输入框内，通过 拼音搜索 城市，支持全拼、简拼 亦可通过 侧边栏 选择，城市按拼音首字母排列 选择好城市后，自动显示辖下 区县 说明 使用（且小程序只能使用）腾讯地图的API 将utils目录中，config.default.js文件改名为config.js 并将其中的key改为自己的腾讯地图key（申请快速且免费） ES6 可 直接作为模块使用，如果对您有帮助，请star 将模块集成到项目时，涉及到不同页面间数据通信的问题,见小程序页面间通信 关于拼音搜索框的实现，见小程序实现拼音搜索框 更新 实现了首页与城市选择页面之间的数据通信效果 针对真机调试发现的，输入汉字时，输入法行为与开发环境不一致的问题，做了修改优化。
小程序选择城市页面
09-14
小程序选择城市代码全 包括小程序选择城市的wxml、wxss、js、json文件，以及存放数据的city.js文件。
微信小程序最新省市区地址数据sql文件
12-26
微信小程序地区对应数据库sql表 全国各省市区的地址数据，适用于mysql数据库，包括建表语句
微信小程序选择城市
02-22
根据城市的中文名称/拼音/首字母搜索,可得到城市名称，城市编号
微信小程序实现城市索引选择+搜索
苏苏就是小苏苏的博客
04-04 4830
1.实现效果 2.实现原理 scroll-view：可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 为列表中的字母索引添加相应id，当触摸右侧固定侧边栏时候，动态设置当前id值，实现锚点定位。 搜索城市时，隐藏其他数据，根据搜索值去匹配（in
小程序 字母选择排序
weixin_42870646的博客
11-13 1570
https://www.jb51.net/article/147286.htm wxml {{group.groupName}} {{user.name}} {{item}} js Page({ data:{ // 当前选择的导航字母 selected: 0, // 选择字母视图滚动的位置id ...
小程序城市列表实现
qq_32489037的博客
12-05 1887
小程序城市列表实现 实现城市列表选择 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；...
微信小程序汽车品牌字母排序
最新发布
12-21
很抱歉，暂时无法直接生成汽车品牌字母排序的小程序代码，但可以为你提供一种创建此排序的小程序的方式： 1. 登录微信小程序开发后台，点击“前往小程序”，在小程序的基本内容配置中添加标题和简介，这是页面的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值