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


Posted in Javascript onJune 06, 2018

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

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

代码很简单.

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

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

Javascript 相关文章推荐
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
js constructor的实际作用分析
Nov 15 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
详解封装基础的angular4的request请求方法
Jun 05 #Javascript
React.js绑定this的5种方法(小结)
Jun 05 #Javascript
微信小程序实现城市列表选择
Jun 05 #Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 #Javascript
如何使node也支持从url加载一个module详解
Jun 05 #Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 #Javascript
You might like
PHP面向对象程序设计之接口用法
2014/08/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python多进程fork()函数详解
2019/02/22 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
物流专业求职计划书
2014/01/10 职场文书
数学系毕业生的自我评价
2014/01/10 职场文书
家长对老师的评语
2014/04/18 职场文书
我的中国心演讲稿
2014/09/04 职场文书
模范班主任事迹材料
2014/12/17 职场文书
简历中自我评价范文
2015/03/11 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
python获取带有返回值的多线程
2022/05/02 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS