微信小程序实用组件：城市切换

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})   } })

<view class="searchLetter touchClass">     <view wx:for="{{searchLetter}}" style="height:{{itemH}}px" wx:key="index" data-letter="{{item.name}}" catchtouchstart="searchStart" catchtouchmove="searchMove" catchtouchend="searchEnd">{{item.name}}</view> </view>  <block wx:if="{{isShowLetter}}"> <view class="showSlectedLetter">     {{showLetter}} </view> </block> <view>当前选择城市：{{city}}</view> <scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" scroll-top="{{scrollTop}}">     <view class="selection" wx:for="{{cityList}}" wx:key="{{item.initial}}">         <view class="item_letter">{{item.initial}}</view>         <view class="item_city" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="{{ct.id}}" data-city="{{ct.city}}" bindtap="bindCity">               {{ct.city}}           </view>     </view> </scroll-view>

.searchLetter{     position: fixed;     right: 0;     width: 40px;     height: 100%;     text-align: center;     justify-content: center;     display: flex;     flex-direction: column;     color: #666;     z-index: 1 } .searchLetter view{     height: 70rpx; } .touchClass{     background-color: rgba(0, 0, 0,0.5);     color: #fff; } .showSlectedLetter{     background-color: rgba(0, 0, 0,0.5);     color: #fff;     display: flex;     justify-content: center;     align-items: center;     position: fixed;     top:50%;     left: 50%;     margin: -50px;     width: 100px;     height: 100px;     border-radius:10px;      font-size: 26px;     z-index: 1 } .selection{     display: flex;     width: 100%;     flex-direction: column; } .item_letter{     display: flex;     background-color: #f8f8f8;     height: 30px;     padding-left: 10px;     align-items: center; } .item_city{     display: flex;     background-color: #fff;     height: 40px;     padding-left: 10px;     align-items: center;     border-bottom: 1px solid #f8f8f8 }