微信小程序车轮之地区选择

车轮出产地址 http://www.see-source.com/weixinwidget/detail.html?wid=81
本文是经学习消化之后所写，功能有所改进。
功能描述：
1.右侧字母列表点击，左侧城市列表随之滚动到对应位置。
2.右侧字母列表滑动，左侧城市列表随之滚动到对应位置。
3.左侧城市列表滚动，右侧字母列表相应显示所在位置。
4.点击城市项，顶部显示当前选择城市。
5.为右侧添加当前所选字母样式

重要代码：

onLoad: function (options) {
    var searchLetter = city.searchLetter;
    // 城市集合
    var cityList = city.cityList();
    var sysInfo = wx.getSystemInfoSync();
    // 滚动层高度
    var winHeight = sysInfo.windowHeight;
    // 右侧每项字母的高度
    var itemH = winHeight / searchLetter.length;
    // 将每个letter元素的顶部,底部高度,名称作为元素对象添加到searchLetter集合中
    // 首先这里没有将字母列表直接赋值给前台，而是将字母，字母顶部高度，字母底部高度整合为一个对象再赋值给前台，其实是有他的用意的。
    var tempObj = [];
    for (var i = 0; i       var temp = {};
      temp.name = searchLetter[i];
      temp.topHeight = i * itemH;
      temp.bottomHeight = (i + 1) * itemH;
      tempObj.push(temp)
    }
    this.setData({
      // 滚动层高度
      winHeight: winHeight,
      // 右侧每项字母的高度
      itemH: itemH,
      searchLetter: tempObj,
      // 城市集合
      cityList: cityList
    })
  },

 // 滑动（首先执行searchStart）
  searchMove: function (e) {
    var pageY = e.touches[0].pageY;
    var startPageY = this.data.startPageY;
    var topHeight = this.data.topHeight;
    var bottomHeight = this.data.bottomHeight;
    // 屏幕左上角是XY轴坐标的原点，向下向右，数值随之增大
    if (startPageY - pageY > 0) { // 向上移动
      if (pageY         this.nowLetter(pageY, this);
      }
    } else {// 向下移动
      if (pageY > bottomHeight) {
        this.nowLetter(pageY, this);
      }
    }
  },

// 根据字母滑动位置，在字母列表中遍历出当前所处位置，解证了上面tempObj的用途
nowLetter: function (pageY, that) {
    var letterData = this.data.searchLetter;
    var bottomHeight = 0;
    var topHeight = 0;
    var showLetter = "";
    for (var i = 0; i       if (letterData[i].topHeight <= pageY && pageY <= letterData[i].bottomHeight) {
        bottomHeight = letterData[i].bottomHeight;
        topHeight = letterData[i].topHeight;
        showLetter = letterData[i].name;
        break;
      }
    }
    // 调整scroll位置
    this.setScrollTop(that, showLetter);
    // 重新修改位置
    that.setData({
      topHeight: topHeight,  // 顶部高度
      bottomHeight: bottomHeight,  // 底部高度
      showLetter: showLetter,  // 选择字母提示框
      startPageY: pageY  // 当前位置
    })
  },

// 根据城市滚动列表‘距离顶部距离’，判断在城市列表集合中所处的位置，随之改变右侧字母列表显示
 bindScroll: function (e) {
    // scroll距离顶部距离
    var scrollTop = e.detail.scrollTop
    // 城市列表
    var cityList = this.data.cityList;

    var cityTopHeight = 0
    var cityBottomHeight = 0
    for (var i = 0; i       // 城市列表高度
      cityBottomHeight += (cityList[i].cityInfo.length) * 43
      if (cityTopHeight         console.log("cityTop + cityTopHeight)
        console.log("cityBottom + cityBottomHeight)
        console.log("scrollTop=========" + scrollTop)
        this.setData({
          letterInto: cityList[i].initial
        })
        break;
      }
      cityTopHeight = cityBottomHeight
    }
  },

Demo链接: http://pan.baidu.com/s/1c180a68 密码: 94vi