上篇文章有介绍一些小程序的自定义组件语法，这篇文章就不多做赘述，重点介绍组件的实现逻辑。
先把效果图贴出来，看看要实现的效果：
城市选择效果图.gif
首先还是设置布局，从实现效果看，组件可分成三个部分：展示城市数据的二级列表、侧边的滑动栏以及中间的提示框。也就是一个scroll-view，一个view布局以及一个text。最终确定的wxml布局文件如下：
我要评论
<scroll-view class='citylist' scroll-y scroll-into-view='{{currentindex}}' scroll-top='{{scrolltop}}'>
<view wx:for='{{allcities}}'>
<view class='letter-class' id="id{{index}}">{{item.letter}}</view>
<view class='item-class' wx:for='{{item.citylist}}' wx:for-item='cityitem' bindtap='cityselectevent' data-city='{{cityitem.name}}' data-letter='{{cityitem.key}}'>{{cityitem.name}}</view>
</view>
</scroll-view>
<view class='cityslide' catchtouchstart='slidestart' catchtouchmove='slidemove' catchtouchend='slideend'>
<view class='cityslideitem' wx:for='{{allcities}}' data-index='{{index}}'>{{item.letter}}</view>
</view>
<text class='lettertext' hidden='{{isletterhidden}}' style='top:{{lettertop}}px;left:{{letterleft}}px'>{{lettertext}}</text>
布局文件有了，我们就需要考虑该如何实现侧边栏与二级列表的联动效果了。这里我利用的是scroll-view的scroll-into-view属性，这个属性能让scroll-view滑动到对应id的view的位置，很符合我们的需求。
scroll-into-view属性.png
这里我们为列表的第一级布局view设置id，并为scroll-view设置scroll-into-view属性
<scroll-view class='citylist' scroll-y scroll-into-view='{{currentindex}}' scroll-top='{{scrolltop}}'>
.
.
.
//id不能以数字开头
<view class='letter-class' id="id{{index}}">{{item.letter}}</view>
然后在.js中的data中初始化currentindex为'id0'
/**
* 组件的初始数据
*/
data: {
currentindex: 'id0'
}
现在的问题就是如何计算出手指在侧边栏上触摸的是第几个letter，然后通过改变currentindex的值，使scroll-view滑动到指定位置来达到联动的效果。
下面说下思路
首先确认侧边栏的高度，我是以屏幕高度减去80px作为侧边栏高度，在.wxss文件中通过样式设置。
.cityslide {
display: flex;
flex-direction: column;
width: 60rpx;
height: calc(100% - 80px);
position: absolute;
top: 40px;
right: 16rpx;
align-items: center;
justify-content: center;
background-color: #ccc;
opacity: 0.6;
}
然后在.js中通过把屏幕高度减去80px计算出侧边栏的具体高度。再除以数据源的一级数据数组长度，计算出每个letter的高度。
wx.getsysteminfo({
success: function (res) {
letterlineheight = (res.windowheight - 80) / that.data.allcities.length;
that.setdata({
lettertop: res.windowheight / 2 - 30,
letterleft: res.windowwidth / 2 - 30
});
}
})
计算出每个letter的高度后，我们就可以在侧边栏的触摸监听事件中，通过触摸的点的坐标位置，来计算出当前触摸的letter的序号index，然后再动态修改currentindex的值为('id'+index)。就可以达到联动的效果了。
显示在屏幕中央的提示框的实现则比较简单，通过一个变量isletterhidden控制text的显示与隐藏就可以轻松实现。
slidestart: function (e) {
//手指触摸的y坐标值
var touchy = e.touches[0].clienty;
//布局距离屏幕顶端距离
var offsettop = e.currenttarget.offsettop;
var index = parseint((touchy - offsettop) / letterlineheight);
this.setdata({
currentindex: 'id' + index,
isletterhidden: false,
lettertext: this.data.allcities[index].letter
});
},
slidemove: function (e) {
var touchy = e.touches[0].clienty;
var offsettop = e.currenttarget.offsettop;
var index = parseint((touchy - offsettop) / letterlineheight);
this.setdata({
currentindex: 'id' + index,
isletterhidden: false,
lettertext: this.data.allcities[index].letter
});
},
slideend: function (e) {
var that = this;
wx: settimeout(function () {
that.setdata({
isletterhidden: true
});
}, 200);
}
这里有一点要注意，设置侧边栏触摸事件的时候，要选择catchtouchxxxx事件，不能使用bindtouchxxxx，因为bind事件不会阻止事件冒泡，这样手指在侧边栏滑动时，会影响到下方的列表的滑动，而catch事件阻止了事件冒泡，就不会出现滑动影响的问题。
再说下城市的数据源格式要求，要求是一个二维数组，然后子项要有name和key两个字段，分别代表城市名和类别letter。
数据源格式.png
项目github地址：templateofhotel
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
网友评论