欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-16 09:35:15
本文实例为大家分享了微信小程序城市选择器,供大家参考,具体内容如下 代码很简单. var city = require('../../utils/cit...

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

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

代码很简单.

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

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