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


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 Firefox3.5中操作select的问题
Jul 10 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
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解析json数据实例
2014/08/19 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python 迭代器与生成器实例详解
2017/05/18 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python代码如何注释
2020/06/01 Python
Python页面加载的等待方式总结
2021/02/28 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
中华在我心中演讲稿
2014/09/13 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
python 字典和列表嵌套用法详解
2021/06/29 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python