微信小程序自定義組件實現城市選擇功能

2020-03-21 16:13:35

字體：大中小

來源：轉載

供稿：網友

上篇文章有介紹一些小程序的自定義組件語法，這篇文章就不多做贅述，重點介紹組件的實現邏輯。

先把效果圖貼出來，看看要實現的效果：

微信小程序,自定義組件,城市選擇

城市選擇效果圖.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。

微信小程序,自定義組件,城市選擇