小程序选择城市及右边字母滚动提示

参考文档：https://www.jianshu.com/p/4b0dfc6f0b56


页面：

<view class="zeigai" tt:if="{
   {zeigaiStrat}}" bindtap="hiddenView" >
	<view class="backGroundColor" catchtap="stopHidden">
		<view class="showtitle flex-end">
			<view class="title">选择国家地区</view>
			<view>
				<image src="取消的小icon" style="width:32rpx;height:32rpx;margin-right:50rpx;margin-top:10rpx;"
				 bindtap="hiddenView" />
			</view>
		</view>
		<view class="endlocationStyle">当前：{
   {
   cityName!=""?cityName:endCity}}</view>
		<scroll-view scroll-y="true" scroll-into-view="{
   {showwords}}" class="scrollStyle" style="height:{
   {455*2}}rpx;">
			<view class="endlocationView">
				<view class="locationTitle">当前定位{
   {
   showwords}}</view>
				<view class="newlocation flex-start location overflow-hidden" bindtap="bindCity" data-city="{
   {endCity}}">
					<view>
						<image src="定位的小icon" style="width:32rpx;height:32rpx;"
						/>
					</view>
					<view style="margin-bottom:8rpx;margin-left:2rpx;font-size:30rpx;">{
   {
   endCity}}</view>
				</view>
				<view class="locationTitle">热门城市</view>
				<view class="flex-wrap">
					<view class="relocation location" tt:for="{
   {city.hotCity}}" tt:key="{
   {item.name}}" bindtap="bindCity" data-city="{
   {item.name}}">
						{
   {
   item.name}}
					</view>
				</view>
			</view>
			<view class="citylistStyle" tt:for="{
   {city}}" tt:key="{
   {index}}" tt:for-index="idx" tt:if="{
   {idx!='hotCity'}}" id="{
   {idx}}">
				<view class="zimu" id="{
   {idx}}">{
   {
   idx}}</view>
				<view tt:for="{
   {city[idx]}}" tt:key="{
   {item.key}}" class="mingz" bindtap="bindCity" data-city="{
   {item.name}}">{
   {
   item.name}}</view>
			</view>
		</scroll-view>
		<view class="zimuView">
			<block tt:for="{
   {city}}" tt:key="{
   {index}}" tt:for-index="idx" tt:if="{
   {idx!='hotCity'}}">
				<view class="zimuZiView" id="{
   {idx}}" bindtouchstart="chStart" bindtouchend="chEnd" catchtouchmove="chMove" catchtap="zimuClick">{
   {
   idx}}</view>
			</block>
		</view>

		<view class="juzhongzimu" tt:if="{
   {hidden}}">{
   {
   showwords}}</view>
	</view>
</view>

css：

@import "../../wxParse/public.ttss";
page{
   
  height: 100%;
}
.backGroundColor{
   
  width: 100%;
  border-radius: 10px 10px 0px 0px;
  background-color: white;
  height: 1070rpx;
  position: fixed;
  bottom: 0;  
  z-index: 99999;
}
.zeigai{
   
  width: 100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  z-index: 88888;
}
.showtitle{
   
  width: 100%;
  margin: 20rpx 0;
  margin-right: 50rpx;
}
.title{
   
  margin-right: 198rpx;  
  font-size: 32rpx;
  color: black;
}
.endlocationStyle{
   
  margin-left: 24rpx;
  color: black;
  font-size: 30rpx;
  margin-bottom: 24rpx;
}
.scrollStyle{
   
 
}
.endlocationView{
   
   background-color: #F2F3FA;
   padding: 24rpx;
   width: 87%;
   margin-bottom: 10rpx;
}
.location{
   
  box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2);
  background-color: white;
  padding: 16rpx 64rpx;
  border-radius: 6rpx;
  color: black;
}
.newlocation{
   
  margin: 20rpx 0;
  width: 20%;
}
.relocation{
   
  margin: 16rpx 24rpx 16rpx 0rpx;
  font-size: 30rpx;
}
.citylistStyle{
   
  padding: 0rpx 24rpx;
}
.zimu{
   
  font-size: 26rpx;
  color: #B7BDD6;
}

.mingz{
   
  margin: 20rpx 0;
  font-size: 32rpx;
  color: black;
}
.zimuView{
   
  position: fixed;
  bottom: 140rpx;
  right: 10rpx;
  text-align: center;
  font-size: 26rpx;
}
.zimuZiView{
   
  font-size: 24rpx;
  color: black;
}
.zimuSelected{
   
  font-size: 24rpx;
  background-color: #519BF3;
  color: white;
  border-radius: 4rpx;
}
.juzhongzimu{
   
  margin: 0 auto;
  text-align: center;
  padding: 12rpx 64rpx;
  border-radius: 14rpx;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 50%;
  left: 41%;
}

public.ttss

/* 自定义全局公共样式 */
.font-size-20{
   
  font-size: 20rpx;
}
.font-size-22{
   
  font-size: 22rpx;
}
.font-size-24{
   
  font-size: 24rpx;
}
.font-size-26{
   
  font-size: 26rpx;
}
.font-size-28{
   
  font-size: 28rpx;
}
.font-size-30{
   
  font-size: 30rpx;
}
.font-size-32{
   
  font-size: 32rpx;
}
.font-size-34{
   
  font-size: 34rpx;
}
.font-size-38{
   
  font-size: 38rpx;
}

/* 字体加粗 */
.font-size-width{
   
   font-weight: 600;
}
/* 溢出隐藏 */
.overflow-hidden{
   
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
/* 百分比宽度 */
.width-40{
   
  width: 40%;
}
.width-50{
   
  width: 50%;
}
.width-60{
   
  width: 60%;
}
.width-70{
   
  width: 70%;
}
.width-80{
   
  width: 80%;
}
.width-90{
   
  width: 90%;
}
.width-92{
   
  width: 92%;
}
.width-100{
   
  width: 100%;
}
/* flex布局 */
.flex-start{
   
   display: flex;
   justify-content: flex-start;
   align-items: center;
}
.flex-space-between{
   
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.flex-wrap{
   
   display: flex;
   flex-wrap:wrap;
   align-items: center;
}
.flex-end{
   
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* icon大小 */
.iconSize-30-30{
   
  width: 60rpx;
  height: 60rpx;
}

.iconSize-40-40{
   
   width: 80rpx;
   height: 80rpx;
}
.iconSize-50-50{
   
   width: 100rpx;
   height: 100rpx;
}
.iconSize-80-80{
   
   width: 160rpx;
   height: 160rpx;
}

/* 字体颜色 */
.color-kored{
   
  color: #FA215F;
}
.color-999{
   
  color: #999999;
}
/* 行高 */

.link-height-20{
   
  line-height: 40rpx;
}
.link-height-30{
   
  line-height: 60rpx;
}
.link-height-40{
   
  line-height: 80rpx;
}
.link-height-50{
   
  line-height: 50rpx;
}
.link-height-60{
   
  line-height: 120rpx;
}
.link-height-80{
   
  line-height: 160rpx;
}
/* 文本居中 */
.text-align{
   
  text-align: center;
}
/* 隐藏 */
.display-none{
   
  display: none;
}

js:

//先引用城市数据文件
var city = require('../../wxParse/city.js');
var endWords = "";
var isNum;
page({
   
  data:{
   
    hidden: false,
    cityName: "", //获取选中的城市名
    endCity: "",
    zimuid: "",
    city: [],
    winHeight: 0,
    lineHeight: 0,
    showwords: '',
    zeigaiStrat: false