這篇“微信小程序怎么實現錨點定位功能”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序怎么實現錨點定位功能”文章吧。

成都創新互聯公司成都企業網站建設服務，提供成都網站制作、成都做網站、外貿營銷網站建設網站開發,網站定制,建網站,網站搭建,網站設計,自適應網站建設,網頁設計師打造企業風格網站,提供周到的售前咨詢和貼心的售后服務。歡迎咨詢做網站需要多少錢:028-86922220

實現效果：

功能實現

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

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

這里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=0&&scrollTop=scrollArr[i-1]&&scrollTop
這里的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();
以上就是關于“微信小程序怎么實現錨點定位功能”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創新互聯行業資訊頻道。
            
            
                        

            新聞名稱：微信小程序怎么實現錨點定位功能            

            文章URL：http://www.xueling.net.cn/article/pesggj.html