微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

代码很简单.

rush:js;"> 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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。