欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解微信小程序開發(fā)之城市選擇器 城市切換

 更新時間:2017年01月17日 14:43:01   作者:懂懂懂懂懂懂懂懂大人  
這篇文章主要介紹了詳解微信小程序開發(fā)之城市選擇器 城市切換,非常具有實用價值,需要的朋友可以參考下。

移動開發(fā)中城市選擇器必不可少.

空白造了個.

gif:

這里只上部分js代碼:

var city = require('../../utils/city.js');

Page({
 data: {
  searchLetter: [],
  showLetter: "",
  winHeight: 0,
  tHeight: 0,
  bHeight: 0,
  startPageY: 0,
  cityList: [],
  isShowLetter: false,
  scrollTop: 0,
  city: ""
 },
 onLoad: function (options) {
  // 生命周期函數(shù)--監(jiān)聽頁面加載
  var searchLetter = city.searchLetter;
  var cityList = city.cityList();
  // console.log(cityInfo);

  var sysInfo = wx.getSystemInfoSync();
  console.log(sysInfo);
  var winHeight = sysInfo.windowHeight;

  //添加要匹配的字母范圍值
  //1、更加屏幕高度設(shè)置子元素的高度
  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
  })

  console.log(this.data.cityInfo);
 },
 onReady: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

 },
 onShow: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面顯示

 },
 onHide: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面隱藏

 },
 onUnload: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面卸載

 },
 onPullDownRefresh: function () {
  // 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

 },
 onReachBottom: function () {
  // 頁面上拉觸底事件的處理函數(shù)

 },
 onShareAppMessage: function () {
  // 用戶點擊右上角分享
  return {
   title: 'title', // 分享標題
   desc: 'desc', // 分享描述
   path: 'path' // 分享路徑
  }
 },
 searchStart: function (e) {
  var showLetter = e.currentTarget.dataset.letter;
  var pageY = e.touches[0].pageY;
  this.setScrollTop(this, showLetter);
  this.nowLetter(pageY, this);
  this.setData({
   showLetter: showLetter,
   startPageY: pageY,
   isShowLetter: true,
  })
 },
 searchMove: function (e) {
  var pageY = e.touches[0].pageY;
  var startPageY = this.data.startPageY;
  var tHeight = this.data.tHeight;
  var bHeight = this.data.bHeight;
  var showLetter = 0;
  console.log(pageY);
  if (startPageY - pageY > 0) { //向上移動
   if (pageY < tHeight) {
    // showLetter=this.mateLetter(pageY,this);
    this.nowLetter(pageY, this);
   }
  } else {//向下移動
   if (pageY > bHeight) {
    // showLetter=this.mateLetter(pageY,this);
    this.nowLetter(pageY, this);
   }
  }
 },
 searchEnd: function (e) {
  // console.log(e);
  // var showLetter=e.currentTarget.dataset.letter;
  var that = this;
  setTimeout(function () {
   that.setData({
    isShowLetter: false
   })
  }, 1000)

 },
 nowLetter: function (pageY, that) {//當前選中的信息
  var letterData = this.data.searchLetter;
  var bHeight = 0;
  var tHeight = 0;
  var showLetter = "";
  for (var i = 0; i < letterData.length; i++) {
   if (letterData[i].tHeight <= pageY && pageY <= letterData[i].bHeight) {
    bHeight = letterData[i].bHeight;
    tHeight = letterData[i].tHeight;
    showLetter = letterData[i].name;
    break;
   }
  }

  this.setScrollTop(that, showLetter);

  that.setData({
   bHeight: bHeight,
   tHeight: tHeight,
   showLetter: showLetter,
   startPageY: pageY
  })
 },
 bindScroll: function (e) {
  console.log(e.detail)
 },
 setScrollTop: function (that, showLetter) {
  var scrollTop = 0;
  var cityList = that.data.cityList;
  var cityCount = 0;
  var initialCount = 0;
  for (var i = 0; i < cityList.length; i++) {
   if (showLetter == cityList[i].initial) {
    scrollTop = initialCount * 30 + cityCount * 41;
    break;
   } else {
    initialCount++;
    cityCount += cityList[i].cityInfo.length;
   }
  }

  that.setData({
   scrollTop: scrollTop
  })
 },
 bindCity: function (e) {
  var city = e.currentTarget.dataset.city;
  this.setData({ city: city })
 }
})

demo代碼下載 

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript實現(xiàn)刮刮樂效果

    JavaScript實現(xiàn)刮刮樂效果

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)刮刮樂效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • 微信小程序上傳圖片并等比列壓縮到指定大小的實例代碼

    微信小程序上傳圖片并等比列壓縮到指定大小的實例代碼

    這篇文章主要介紹了微信小程序 上傳圖片并等比列壓縮到指定大小,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-10-10
  • JS window對象的top、parent、opener含義介紹

    JS window對象的top、parent、opener含義介紹

    本文為大家介紹下JS window對象的top、parent、opener含義,不了解的朋友可以參考下,希望對大家有所幫助
    2013-12-12
  • 通過遮罩層實現(xiàn)浮層DIV登錄的js代碼

    通過遮罩層實現(xiàn)浮層DIV登錄的js代碼

    遮罩層實現(xiàn)浮層DIV登錄的效果,想必很多的朋友都有遇到過吧,實現(xiàn)起來也是很簡單的,下面有個不錯的實現(xiàn),大家可以感受下
    2014-02-02
  • Webpack的dll功能使用

    Webpack的dll功能使用

    這篇文章主要介紹了Webpack的dll功能使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • IE6 fixed的完美解決方案

    IE6 fixed的完美解決方案

    IE7已經(jīng)支持position:fixed了,而我們的IE6呢?還繼續(xù)使用js事件?消耗資源,破壞結(jié)構(gòu),畫面閃耀。
    2011-03-03
  • 輕松理解JavaScript之AJAX

    輕松理解JavaScript之AJAX

    本文主要介紹了JavaScript中的AJAX的相關(guān)知識,具有很好的參考價值,下面跟著小編一起來看下吧
    2017-03-03
  • uniapp web-view組件雙向通信的問題記錄

    uniapp web-view組件雙向通信的問題記錄

    本文主要介紹在uniapp中頁面與webview組件內(nèi)頁面的雙向通信問題,本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • TreeView 用法(有代碼)(asp.net)

    TreeView 用法(有代碼)(asp.net)

    TreeView 用法,后臺結(jié)合asp.net需要的朋友可以參考下。
    2011-07-07
  • Gulp實現(xiàn)靜態(tài)網(wǎng)頁模塊化的方法詳解

    Gulp實現(xiàn)靜態(tài)網(wǎng)頁模塊化的方法詳解

    眾所周知Gulp.js 是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務(wù)。下面這篇文章主要給大家介紹了關(guān)于Gulp實現(xiàn)靜態(tài)網(wǎng)頁模塊化的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下。
    2018-01-01

最新評論