本文实例为大家分享了微信小程序城市选择器，供大家参考，具体内容如下
代码很简单.
我要评论
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
vue源码实战render.js与$nextTick的异步调用
网友评论