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

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

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

代码很简单.

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.bHeightayptuF = (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;

setTimeayptuFout(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下载地址

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。