移动开发中城市选择器必不可少.

空白造了个.

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) {
  // 生命周期函数--监听页面加载
  var searchLetter = city.searchLetter;
  var cityList = city.cityList();
  // console.log(cityInfo);

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

  //添加要匹配的字母范围值
  //1、更加屏幕高度设置子元素的高度
  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 () {
  // 生命周期函数--监听页面初次渲染完成

 },
 onShow: function () {
  // 生命周期函数--监听页面显示

 },
 onHide: function () {
  // 生命周期函数--监听页面隐藏

 },
 onUnload: function () {
  // 生命周期函数--监听页面卸载

 },
 onPullDownRefresh: function () {
  // 页面相关事件处理函数--监听用户下拉动作

 },
 onReachBottom: function () {
  // 页面上拉触底事件的处理函数

 },
 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代码下载 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?