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


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 相关文章推荐
15条JavaScript最佳实践小结
Aug 09 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
CocosCreator入门教程之网络通信
Apr 16 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抓即时股票信息
2006/10/09 PHP
PHP伪静态写法附代码
2008/06/20 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
TensorFlow实现模型评估
2018/09/07 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
物业保安主管岗位职责
2013/12/25 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
2014年租房协议书范本
2014/10/30 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
监护人证明
2015/06/19 职场文书
师德培训心得体会2016
2016/01/09 职场文书
2019秋季运动会口号
2019/06/25 职场文书