微信小程式自定義元件-城市選擇

RaoMeng發表於2018-12-06
微信小程式元件

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

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

城市選擇效果圖.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地址：github.com/RaoMeng/Tem…

相關文章