上篇文章有介紹一些小程序的自定義組件語法聘鳞，這篇文章就不多做贅述诡宗，重點介紹組件的實現(xiàn)邏輯。
先把效果圖貼出來瞳步，看看要實現(xiàn)的效果：
首先還是設置布局闷哆，從實現(xiàn)效果看，組件可分成三個部分：展示城市數(shù)據(jù)的二級列表单起、側邊的滑動欄以及中間的提示框抱怔。也就是一個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>
布局文件有了屈留，我們就需要考慮該如何實現(xiàn)側邊欄與二級列表的聯(lián)動效果了。這里我利用的是scroll-view的scroll-into-view屬性测蘑，這個屬性能讓scroll-view滑動到對應id的view的位置灌危，很符合我們的需求。
這里我們?yōu)榱斜淼牡谝患壊季講iew設置id碳胳，并為scroll-view設置scroll-into-view屬性
<scroll-view class='cityList' scroll-y scroll-into-view='{{currentIndex}}' scroll-top='{{scrollTop}}'>
.
.
.
//id不能以數(shù)字開頭
<view class='letter-class' id="id{{index}}">{{item.letter}}</view>
然后在.js中的data中初始化currentIndex為'id0'
/**
* 組件的初始數(shù)據(jù)
*/
data: {
currentIndex: 'id0'
}
現(xiàn)在的問題就是如何計算出手指在側邊欄上觸摸的是第幾個letter勇蝙，然后通過改變currentIndex的值，使scroll-view滑動到指定位置來達到聯(lián)動的效果挨约。
下面說下思路
首先確認側邊欄的高度味混，我是以屏幕高度減去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計算出側邊欄的具體高度翁锡。再除以數(shù)據(jù)源的一級數(shù)據(jù)數(shù)組長度，計算出每個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的高度后盗誊，我們就可以在側邊欄的觸摸監(jiān)聽事件中，通過觸摸的點的坐標位置，來計算出當前觸摸的letter的序號index哈踱，然后再動態(tài)修改currentIndex的值為('id'+index)荒适。就可以達到聯(lián)動的效果了。
顯示在屏幕中央的提示框的實現(xiàn)則比較簡單开镣，通過一個變量isLetterHidden控制text的顯示與隱藏就可以輕松實現(xiàn)刀诬。
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事件阻止了事件冒泡怎憋，就不會出現(xiàn)滑動影響的問題又碌。
再說下城市的數(shù)據(jù)源格式要求，要求是一個二維數(shù)組绊袋，然后子項要有name和key兩個字段毕匀，分別代表城市名和類別letter。
項目GitHub地址：
微信小程序酒店類模板
微信小程序捐款類模板
