置顶高度

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,})

}

})

Android 仿照美团城市选择,微信小程序仿美团城市选择相关推荐

  1. php 仿美团切换城市,微信小程序仿美团城市选择的实现

    这篇文章主要为大家详细介绍了微信小程序仿美团城市选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了微信小程序城市选择器,供大家参考,具体内容如下 代码很简单. var cit ...

  2. 微信小程序 仿美团城市选择 城市切换

    原来的城市选择做了一些修改. 代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({data: {sea ...

  3. 004 - 微信小程序 仿美团城市选择 城市切换

    代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({data: {searchLetter: [],s ...

  4. 微信小程序—仿美团酒店入住日期时段选择

    美团市值突飞猛进,确实霸占了我们的吃喝玩乐,所以想做什么东西,研究一下美团也是不错的.最近需要用到一个酒店入住日期选择的组件,看了一下美团的设计,很好用,在此实现一下. 效果图如下: 体验路径(并获取 ...

  5. 微信小程序—自定义(城市选择)弹窗组件,将弹窗组件的值传给调用页面并显示(图文)

    微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...

  6. 微信小程序实战—实现城市列表的选择

    ##微信小程序实战-实现城市列表的选择 ####实现效果预览 ####实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 ####目录结构 ####主要代码 #### ...

  7. 微信小程序如何在地图选择地址并返回经纬度

    微信小程序如何在地图选择地址并返回经纬度 微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息 实现效果: var that = thiswx.chooseLocation({suc ...

  8. 微信小程序开发之城市定位(腾讯位置服务)

    微信小程序实现城市定位功能 一.定位当前城市信息的步骤: 步骤1:获取当前地理位置,首先要拿到用户的授权 wx.openSeting 步骤2:调用 wx.getLocation获取当前用户的地理位置( ...

  9. 在微信小程序中打开地图选择位置功能

    在微信小程序中打开地图选择位置功能 前言 首先查看效果 一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...

  10. 微信小程序-获取当前城市位置

    微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...

最新文章

  1. Outlook addon CommandBarButton picture 的不透明效果解决方案
  2. UVa1112 - Mice and Maze(Dijkstra和Floyd_warshall)
  3. 观看马云网商大会视频的一些感想.
  4. JAVA——Java连接MySQL数据库
  5. mysql的partition分区
  6. glassfish发布应用_GlassFish 4升级的构建,Gradle和嵌入式应用服务器
  7. 使用ASM 4处理Java类文件–第二部分:Tree API
  8. 机器学习十大经典算法之逻辑回归
  9. 测试的第二重境界:站在Bug之上
  10. 使用winx dvd ripper转换视频,如何获得高质量的视频?
  11. 一起来看小米发布会!
  12. 漂亮有创意的思维导图模板下载教程,教你思维导图怎么画
  13. csgo怎么一直连接服务器失败,CSGO提示连接到官方任意服务器失败怎么办?
  14. linux重新初始化网络命令,如何在Ubuntu 18.04 Bionic Beaver Linux上重新启动网络
  15. 退出cmd.exe或退出批处理文件
  16. 世界著名电影特效公司
  17. 小乌龟(TortoiseGit)配置git的ssh连接到gitlab
  18. 【已解决】微信开发者工具打不开(或显示nw.js)
  19. 智能家电项目Linux程序,基于ARM-Linux的无线智能家居系统
  20. 使用URL 启动unity Andriod APP并传递参数

热门文章

  1. FPGA SDRAM接口设计(一)初窥门径
  2. win10 cortana 没反应解决方法
  3. 《黑白团团队》第八次团队作业:Alpha冲刺 第二天
  4. 植物摄影——顶尖高手传授独门秘技
  5. web前端期末大作业:旅游网页主题网站设计——桂林旅游网站的设计 (7页)HTML+CSS+JavaScript web网页设计与开发 静态网页的制作 web期末作业设计网页 web结课作业的源
  6. vue在移动端实现禁用物理返回键
  7. pycharm 查看 python源代码
  8. 电大计算机绘图本任务检测,(更新版)国家开放大学电大《计算机绘图》网考形考作业试题及答案-20210724215340.pdf-原创力文档...
  9. 有效括号 python_1111. 有效括号的嵌套深度
  10. 计算机网络——wireshark抓包