Implementierung des WeChat-Miniprogramms zur Nachahmung der Stadtauswahl in Meituan

不言
Freigeben: 2018-06-27 16:06:14
Original
3558 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Stadtauswahl des WeChat-Miniprogramms vor, das Meituan nachahmt. Es hat einen gewissen Referenzwert.

Das Beispiel in diesem Artikel teilt das WeChat-Miniprogramm. Die Programmstadtauswahl dient als Referenz. Der spezifische Inhalt lautet wie folgt:

Der Code ist sehr einfach.

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,
 })
 }
})
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

WeChat-Applet implementiert Funktionen zum Falten und Entfalten von Artikeln

Warenkorbfunktion im WeChat-Applet So implementieren Sie es

WeChat-Applet zum Erhalten von QR-Code

Das obige ist der detaillierte Inhalt vonImplementierung des WeChat-Miniprogramms zur Nachahmung der Stadtauswahl in Meituan. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage