温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

小程序仿美团城市选择的实现示例

发布时间:2021-01-28 11:42:52 阅读:257 作者:小新 栏目:移动开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章将为大家详细讲解有关小程序仿美团城市选择的实现示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

具体内容如下

小程序仿美团城市选择的实现示例

代码很简单.

var city = require('../../utils/city.js');
var app = getApp()
Page({
 data: {
 searchLetter: [],
 showLetter"",
 winHeight0,
 // tHeight0,
 // bHeight0,
 cityList: [],
 isShowLetterfalse,
 scrollTop0,//置顶高度
 scrollTopId'',//置顶id
 city"上海市",
 hotcityList: [{ cityCode110000, city'北京市' }, { cityCode310000, city'上海市' }, { cityCode440100, city'广州市' }, { cityCode440300, city'深圳市' }, { cityCode330100, city'杭州市' }, { cityCode320100, city'南京市' }, { cityCode420100, city'武汉市' }, { cityCode410100, city'郑州市' }, { cityCode120000, city'天津市' }, { cityCode610100, city'西安市' }, { cityCode510100, city'成都市' }, { cityCode500000, 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,
  isShowLettertrue,
  scrollTopId: showLetter,
 })
 var that = this;
 setTimeout(function () {
  that.setData({
  isShowLetterfalse
  })
 }, 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({
  scrollTop0,
 })
 }
})

关于“小程序仿美团城市选择的实现示例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×