小程序自定義組件實(shí)現(xiàn)城市選擇功能

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:11:17

小程序自定義組件實(shí)現(xiàn)城市選擇功能

小程序自定義組件實(shí)現(xiàn)城市選擇功能:上篇文章有介紹一些小程序的自定義組件語(yǔ)法，這篇文章就不多做贅述，重點(diǎn)介紹組件的實(shí)現(xiàn)邏輯。先把效果圖貼出來(lái)，看看要實(shí)現(xiàn)的效果：城市選擇效果圖.gif 首先還是設(shè)置布局，從實(shí)現(xiàn)效果看，組件可分成三個(gè)部分：展示城市數(shù)據(jù)的二級(jí)列表、側(cè)邊的滑動(dòng)欄以及中

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀小程序自定義組件實(shí)現(xiàn)城市選擇功能:上篇文章有介紹一些小程序的自定義組件語(yǔ)法，這篇文章就不多做贅述，重點(diǎn)介紹組件的實(shí)現(xiàn)邏輯。先把效果圖貼出來(lái)，看看要實(shí)現(xiàn)的效果：城市選擇效果圖.gif 首先還是設(shè)置布局，從實(shí)現(xiàn)效果看，組件可分成三個(gè)部分：展示城市數(shù)據(jù)的二級(jí)列表、側(cè)邊的滑動(dòng)欄以及中

上篇文章有介紹一些小程序的自定義組件語(yǔ)法，這篇文章就不多做贅述，重點(diǎn)介紹組件的實(shí)現(xiàn)邏輯。

先把效果圖貼出來(lái)，看看要實(shí)現(xiàn)的效果：

城市選擇效果圖.gif

首先還是設(shè)置布局，從實(shí)現(xiàn)效果看，組件可分成三個(gè)部分：展示城市數(shù)據(jù)的二級(jí)列表、側(cè)邊的滑動(dòng)欄以及中間的提示框。也就是一個(gè)scroll-view，一個(gè)view布局以及一個(gè)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>

布局文件有了，我們就需要考慮該如何實(shí)現(xiàn)側(cè)邊欄與二級(jí)列表的聯(lián)動(dòng)效果了。這里我利用的是scroll-view的scroll-into-view屬性，這個(gè)屬性能讓scroll-view滑動(dòng)到對(duì)應(yīng)id的view的位置，很符合我們的需求。

scroll-into-view屬性.png

這里我們?yōu)榱斜淼牡谝患?jí)布局view設(shè)置id，并為scroll-view設(shè)置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)在的問題就是如何計(jì)算出手指在側(cè)邊欄上觸摸的是第幾個(gè)letter，然后通過(guò)改變currentIndex的值，使scroll-view滑動(dòng)到指定位置來(lái)達(dá)到聯(lián)動(dòng)的效果。

下面說(shuō)下思路

首先確認(rèn)側(cè)邊欄的高度，我是以屏幕高度減去80px作為側(cè)邊欄高度，在.wxss文件中通過(guò)樣式設(shè)置。

.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中通過(guò)把屏幕高度減去80px計(jì)算出側(cè)邊欄的具體高度。再除以數(shù)據(jù)源的一級(jí)數(shù)據(jù)數(shù)組長(zhǎng)度，計(jì)算出每個(gè)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
 });
 }
 })

計(jì)算出每個(gè)letter的高度后，我們就可以在側(cè)邊欄的觸摸監(jiān)聽事件中，通過(guò)觸摸的點(diǎn)的坐標(biāo)位置，來(lái)計(jì)算出當(dāng)前觸摸的letter的序號(hào)index，然后再動(dòng)態(tài)修改currentIndex的值為('id'+index)。就可以達(dá)到聯(lián)動(dòng)的效果了。

顯示在屏幕中央的提示框的實(shí)現(xiàn)則比較簡(jiǎn)單，通過(guò)一個(gè)變量isLetterHidden控制text的顯示與隱藏就可以輕松實(shí)現(xiàn)。

slideStart: function (e) {
 //手指觸摸的y坐標(biāo)值
 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);
}

這里有一點(diǎn)要注意，設(shè)置側(cè)邊欄觸摸事件的時(shí)候，要選擇catchtouchxxxx事件，不能使用bindtouchxxxx，因?yàn)閎ind事件不會(huì)阻止事件冒泡，這樣手指在側(cè)邊欄滑動(dòng)時(shí)，會(huì)影響到下方的列表的滑動(dòng)，而catch事件阻止了事件冒泡，就不會(huì)出現(xiàn)滑動(dòng)影響的問題。

再說(shuō)下城市的數(shù)據(jù)源格式要求，要求是一個(gè)二維數(shù)組，然后子項(xiàng)要有name和key兩個(gè)字段，分別代表城市名和類別letter。