微信小程序仿美团城市选择

本文实例为大家分享了微信小程序城市选择器，供大家参考，具体内容如下

代码很简单.

var city = require('../../utils/city.js');
var app = getapp()
page({
 data: {
 searchletter: [],
 showletter: "",
 winheight: 0,
 // theight: 0,
 // bheight: 0,
 citylist: [],
 isshowletter: false,
 scrolltop: 0,//置顶高度
 scrolltopid: '',//置顶id
 city: "上海市",
 hotcitylist: [{ citycode: 110000, city: '北京市' }, { citycode: 310000, city: '上海市' }, { citycode: 440100, city: '广州市' }, { citycode: 440300, city: '深圳市' }, { citycode: 330100, city: '杭州市' }, { citycode: 320100, city: '南京市' }, { citycode: 420100, city: '武汉市' }, { citycode: 410100, city: '郑州市' }, { citycode: 120000, city: '天津市' }, { citycode: 610100, city: '西安市' }, { citycode: 510100, city: '成都市' }, { citycode: 500000, city: '重庆市' }]
 },
 onload: function () {
 // 生命周期函数--监听页面加载
 var searchletter = city.searchletter;
 var citylist = city.citylist();
 var sysinfo = wx.getsysteminfosync();
 var winheight = sysinfo.windowheight;
 var itemh = winheight / searchletter.length;
 var tempobj = [];
 for (var i = 0; i < searchletter.length; i++) {
  var temp = {};
  temp.name = searchletter[i];
  temp.theight = i * itemh;
  temp.bheight = (i + 1) * itemh;
  tempobj.push(temp)
 }
 this.setdata({
  winheight: winheight,
  itemh: itemh,
  searchletter: tempobj,
  citylist: citylist
 })

 },
 onready: function () {
 // 生命周期函数--监听页面初次渲染完成

 },
 onshow: function () {
 // 生命周期函数--监听页面显示

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

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

 },
 onpulldownrefresh: function () {
 // 页面相关事件处理函数--监听用户下拉动作

 },
 onreachbottom: function () {
 // 页面上拉触底事件的处理函数

 },
 clickletter: function (e) {
 console.log(e.currenttarget.dataset.letter)
 var showletter = e.currenttarget.dataset.letter;
 this.setdata({
  showletter: showletter,
  isshowletter: true,
  scrolltopid: showletter,
 })
 var that = this;
 settimeout(function () {
  that.setdata({
  isshowletter: false
  })
 }, 1000)
 },
 //选择城市
 bindcity: function (e) {
 console.log("bindcity")
 this.setdata({ city: e.currenttarget.dataset.city })
 },
 //选择热门城市
 bindhotcity: function (e) {
 console.log("bindhotcity")
 this.setdata({
  city: e.currenttarget.dataset.city
 })
 },
 //点击热门城市回到顶部
 hotcity: function () {
 this.setdata({
  scrolltop: 0,
 })
 }
})

demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。