微信小程序實現錨點定位功能的方法實例

Posted on by

前言

在小程序開發中，我們經常會遇到滾動列表查看的需求，那麼使用錨點定位來實現可以達到交互體驗更加友好的效果，我們看下項目中實現的效果：

            

功能實現

采用小程序視圖容器組件實現：scroll-view

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

<scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}" class="scroll-warp" scroll-with-animation="{{true}}" bindscroll="handelScroll">
   <block wx:for="{{dataList}}" wx:key="{{index}}">
      <view class="floorType" id="{{item.floor}}">
     </view>
   </block>
</scroll-view>

這裡autoHeight是根據不同機型的高度動態計算出來的，scroll-view有個重要屬性：scroll-into-view，它接收一個string值，即為滾動的地點（錨點），那麼我們需要在scroll-view子節點也設置相應的錨點列表：如上圖的class=floorType節點中的id屬性。這樣我們的滾動就有瞭一一對應的關系瞭，在篩選塊點擊樓層，將toView變量設置成對應的數據，列表也會滾動到對應的位置。
當我們滾動列表的時候，頂部的高亮篩選項也需要對應切換，那這個時候怎麼辦呢？

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

關鍵代碼：

handelScroll(e) {
        let scrollTop=e.detail.scrollTop;
        let scrollArr= this.data.anchorArray;
        if(scrollTop>=scrollArr[scrollArr.length-1]-this.data.autoHeight){
                return;
          }else {
              for(let i=0;i<scrollArr.length;i++){
                    if(scrollTop>=0&&scrollTop<scrollArr[0]){
                    // selectFloorIndex控制篩選塊高亮顯示
                        this.setData({
                            selectFloorIndex: 0
                        });
                    }else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]) {
                        this.setData({
                            selectFloorIndex: i
                        });
                 }
             }
         }
    }

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

每個錨點塊都有一個固定的高度，我們在拿到數據渲染完頁面後，可以通過
boundingClientRect方法拿到類名為floorType各個節點的高度，並將這些高度裝進anchorArray數組中，那麼當我們滾動超過某塊錨點高度之後，頂部篩選項也會隨之切換到下一個。

關鍵代碼：

            let query = wx.createSelectorQuery().in(this);
            let heightArr =[];
            let h = 0;
            query.selectAll('.floorType').boundingClientRect((react)=>{
                react.forEach((res)=>{
                    h+=res.height;
                    heightArr.push(h)
                })
                this.setData({
                    anchorArray:heightArr
                });
            }).exec();

到這裡，我們的錨點定位滾動已完成，希望能對大傢有所幫助，如有問題，歡迎溝通指出！

總結

到此這篇關於微信小程序實現錨點定位功能的文章就介紹到這瞭,更多相關微信小程序錨點定位內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：