微信小程序?qū)崿F(xiàn)錨點定位功能的方法實例

第微信小程序?qū)崿F(xiàn)錨點定位功能的方法實例在小程序開發(fā)中，我們經(jīng)常會遇到滾動列表查看的需求，那么使用錨點定位來實現(xiàn)可以達到交互體驗更加友好的效果，我們看下項目中實現(xiàn)的效果：

功能實現(xiàn)

采用小程序視圖容器組件實現(xiàn)：scroll-view

這里需要注意的是，豎向滾動時，scroll-view需要指定一個固定高度，我們看下WXML代碼：

scroll-viewscroll-yscroll-into-view="{{toView}}"scroll-with-animation="{{true}}"bindscroll="handelScroll"

blockwx:for="{{dataList}}"wx:key="{{index}}"

viewid="{{item.floor}}"

/view

/block

/scroll-view

這里autoHeight是根據(jù)不同機型的高度動態(tài)計算出來的，scroll-view有個重要屬性：scroll-into-view，它接收一個string值，即為滾動的地點（錨點），那么我們需要在scroll-view子節(jié)點也設(shè)置相應(yīng)的錨點列表：如上圖的>

當(dāng)我們滾動列表的時候，頂部的高亮篩選項也需要對應(yīng)切換，那這個時候怎么辦呢？

我們可以在bindscroll此事件上做文章：滾動列表的時候會觸發(fā)此事件。

關(guān)鍵代碼：

handelScroll(e){

letscrollTop=e.detail.scrollTop;

letscrollArr=this.data.anchorArray;

if(scrollTop=scrollArr[scrollArr.length-1]-this.data.autoHeight){

return;

}else{

for(leti=0;iscrollArr.length;i++){

if(scrollTop=0scrollTopscrollArr[0]){

//selectFloorIndex控制篩選塊高亮顯示

this.setData({

selectFloorIndex:0

}elseif(scrollTop=scrollArr[i-1]scrollTopscrollArr[i]){

this.setData({

selectFloorIndex:i

這里的anchorArray為所有錨點塊所占頁面高度的數(shù)組總和，用圖可以看得更加清晰一點：

每個錨點塊都有一個固定的高度，我們在拿到數(shù)據(jù)渲染完頁面后，可以通過

boundingClientRect方法拿到類名為floorType各個節(jié)點的高度，并將這些高度裝進anchorArray數(shù)組中，那么當(dāng)我們滾動超過某塊錨點高度之后，頂部篩選項也會隨之切換到下一個。

關(guān)鍵代碼：

letquery=wx.createSelectorQuery().in(this);

letheightArr=[];

leth=0;

query.selectAll('.floorType').boundingClientRect((react)={

react.forEach((res)={

h+=res.height;

heightArr.push(h)

this.setData({