快捷導(dǎo)航

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

更新時(shí)間：2021年07月18日 10:44:13 作者：于不凡呀

“錨點(diǎn)”功能在實(shí)際應(yīng)用設(shè)計(jì)的好,可以提高用戶體驗(yàn),這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)錨點(diǎn)定位功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在小程序開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到滾動(dòng)列表查看的需求，那么使用錨點(diǎn)定位來(lái)實(shí)現(xiàn)可以達(dá)到交互體驗(yàn)更加友好的效果，我們看下項(xiàng)目中實(shí)現(xiàn)的效果：

功能實(shí)現(xiàn)

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

這里需要注意的是，豎向滾動(dòng)時(shí)，scroll-view需要指定一個(gè)固定高度，我們看下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是根據(jù)不同機(jī)型的高度動(dòng)態(tài)計(jì)算出來(lái)的，scroll-view有個(gè)重要屬性：scroll-into-view，它接收一個(gè)string值，即為滾動(dòng)的地點(diǎn)（錨點(diǎn)），那么我們需要在scroll-view子節(jié)點(diǎn)也設(shè)置相應(yīng)的錨點(diǎn)列表：如上圖的class=floorType節(jié)點(diǎn)中的id屬性。這樣我們的滾動(dòng)就有了一一對(duì)應(yīng)的關(guān)系了，在篩選塊點(diǎn)擊樓層，將toView變量設(shè)置成對(duì)應(yīng)的數(shù)據(jù)，列表也會(huì)滾動(dòng)到對(duì)應(yīng)的位置。
當(dāng)我們滾動(dòng)列表的時(shí)候，頂部的高亮篩選項(xiàng)也需要對(duì)應(yīng)切換，那這個(gè)時(shí)候怎么辦呢？

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

關(guān)鍵代碼：

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為所有錨點(diǎn)塊所占頁(yè)面高度的數(shù)組總和，用圖可以看得更加清晰一點(diǎn)：

每個(gè)錨點(diǎn)塊都有一個(gè)固定的高度，我們?cè)谀玫綌?shù)據(jù)渲染完頁(yè)面后，可以通過(guò)
boundingClientRect方法拿到類名為floorType各個(gè)節(jié)點(diǎn)的高度，并將這些高度裝進(jìn)anchorArray數(shù)組中，那么當(dāng)我們滾動(dòng)超過(guò)某塊錨點(diǎn)高度之后，頂部篩選項(xiàng)也會(huì)隨之切換到下一個(gè)。

關(guān)鍵代碼：

            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();

到這里，我們的錨點(diǎn)定位滾動(dòng)已完成，希望能對(duì)大家有所幫助，如有問(wèn)題，歡迎溝通指出！