车轮出产地址 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 < searchLetter.length; 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 < topHeight) { 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 < letterData.length; 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 < cityList.length; i++) { // 城市列表高度 cityBottomHeight += (cityList[i].cityInfo.length) * 43 if (cityTopHeight < scrollTop && scrollTop < cityBottomHeight) { console.log("cityTopHeight=========" + cityTopHeight) console.log("cityBottomHeight=========" + cityBottomHeight) console.log("scrollTop=========" + scrollTop) this.setData({ letterInto: cityList[i].initial }) break; } cityTopHeight = cityBottomHeight } },Demo链接: http://pan.baidu.com/s/1c180a68 密码: 94vi
