Android 仿照美团城市选择,微信小程序仿美团城市选择
置顶高度
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 仿照美团城市选择,微信小程序仿美团城市选择相关推荐
- php 仿美团切换城市,微信小程序仿美团城市选择的实现
这篇文章主要为大家详细介绍了微信小程序仿美团城市选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了微信小程序城市选择器,供大家参考,具体内容如下 代码很简单. var cit ...
- 微信小程序 仿美团城市选择 城市切换
原来的城市选择做了一些修改. 代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({data: {sea ...
- 004 - 微信小程序 仿美团城市选择 城市切换
代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({data: {searchLetter: [],s ...
- 微信小程序—仿美团酒店入住日期时段选择
美团市值突飞猛进,确实霸占了我们的吃喝玩乐,所以想做什么东西,研究一下美团也是不错的.最近需要用到一个酒店入住日期选择的组件,看了一下美团的设计,很好用,在此实现一下. 效果图如下: 体验路径(并获取 ...
- 微信小程序—自定义(城市选择)弹窗组件,将弹窗组件的值传给调用页面并显示(图文)
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...
- 微信小程序实战—实现城市列表的选择
##微信小程序实战-实现城市列表的选择 ####实现效果预览 ####实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 ####目录结构 ####主要代码 #### ...
- 微信小程序如何在地图选择地址并返回经纬度
微信小程序如何在地图选择地址并返回经纬度 微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息 实现效果: var that = thiswx.chooseLocation({suc ...
- 微信小程序开发之城市定位(腾讯位置服务)
微信小程序实现城市定位功能 一.定位当前城市信息的步骤: 步骤1:获取当前地理位置,首先要拿到用户的授权 wx.openSeting 步骤2:调用 wx.getLocation获取当前用户的地理位置( ...
- 在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能 前言 首先查看效果 一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
- 微信小程序-获取当前城市位置
微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...
最新文章
- Outlook addon CommandBarButton picture 的不透明效果解决方案
- UVa1112 - Mice and Maze(Dijkstra和Floyd_warshall)
- 观看马云网商大会视频的一些感想.
- JAVA——Java连接MySQL数据库
- mysql的partition分区
- glassfish发布应用_GlassFish 4升级的构建,Gradle和嵌入式应用服务器
- 使用ASM 4处理Java类文件–第二部分:Tree API
- 机器学习十大经典算法之逻辑回归
- 测试的第二重境界:站在Bug之上
- 使用winx dvd ripper转换视频,如何获得高质量的视频?
- 一起来看小米发布会!
- 漂亮有创意的思维导图模板下载教程,教你思维导图怎么画
- csgo怎么一直连接服务器失败,CSGO提示连接到官方任意服务器失败怎么办?
- linux重新初始化网络命令,如何在Ubuntu 18.04 Bionic Beaver Linux上重新启动网络
- 退出cmd.exe或退出批处理文件
- 世界著名电影特效公司
- 小乌龟(TortoiseGit)配置git的ssh连接到gitlab
- 【已解决】微信开发者工具打不开(或显示nw.js)
- 智能家电项目Linux程序,基于ARM-Linux的无线智能家居系统
- 使用URL 启动unity Andriod APP并传递参数
热门文章
- FPGA SDRAM接口设计(一)初窥门径
- win10 cortana 没反应解决方法
- 《黑白团团队》第八次团队作业:Alpha冲刺 第二天
- 植物摄影——顶尖高手传授独门秘技
- web前端期末大作业:旅游网页主题网站设计——桂林旅游网站的设计 (7页)HTML+CSS+JavaScript web网页设计与开发 静态网页的制作 web期末作业设计网页 web结课作业的源
- vue在移动端实现禁用物理返回键
- pycharm 查看 python源代码
- 电大计算机绘图本任务检测,(更新版)国家开放大学电大《计算机绘图》网考形考作业试题及答案-20210724215340.pdf-原创力文档...
- 有效括号 python_1111. 有效括号的嵌套深度
- 计算机网络——wireshark抓包