微信小程序仿美团城市选择
程序员文章站
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 我们是如何设计存储4亿个电话号码的