小程序吸頂+錨點導航｜ 8月更文挑戰

開發微信小程序時，常常會遇到一些特別的功能，單頁面的錨點導航，目前好像沒什麼開放組件能夠直接用到微信小程序中，今天分享一下~

一、定義導航條內容及高度

使用循環動態展現,這樣能夠更好的管理頁面錨點吸頂後展現的效果，並定義toView和navIdx設置目的導航條位置

初始化的時候獲取scrollview全部模塊的高度，爲錨點滾動使用，而且獲取節點距離頂部的距離

wxml
    <view class="navbar-wrap">        <view class="scrollListBox {{isFixedTop?'fixed':''}}" id="navbar">            <view wx:for="{{navList}}" wx:for-index="idx" wx:key="index" bindtap='clickScroll' data-idx="{{idx}}" data-id="{{item.id}}" class="scrollListItem {{idx == navIdx ? 'onScrollNav':''}}">                {{item.name}}            </view>            <!-- 用於吸頂後佔位 -->        </view>        <view class="scrollListBox" wx:if="{{isFixedTop}}"></view>    </view>js:
data: {
    navbarInitTop: 0, //導航欄初始化距頂部的距離    isFixedTop: false, //是否固定頂部    toView:"",    navIdx:0,    navList:[            {                id: "list0",                name:"簡介"            },{                id: "list1",                name:"價格"            },{                id: "list2",                name:"周邊"            },{                id: "list3",                name:"附近"            }     ],
},
onShow: function () {        var that = this;        let query = wx.createSelectorQuery().in(this);        let heightArr =[];        let h = 0;        query.selectAll('.scrollListItem').boundingClientRect((react)=>{            react.forEach((res)=>{                h+=res.height;                heightArr.push(h)            })            this.setData({                anchorArray:heightArr            });        }).exec();        //導航欄吸頂        if (that.data.navbarInitTop == 0) {            //獲取節點距離頂部的距離            wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) {                if (rect && rect.top > 0) {                    var navbarInitTop = parseInt(rect.top);                    that.setData({                        navbarInitTop: navbarInitTop                    });                }            }).exec();        }
},
wxss:
.navbar-wrap {    width: 100%;    line-height: 102rpx;}scroll-view {    height: 600px;}.scrollListBox{      width: 100%;    line-height: 102rpx;    background: #f6f8fc;    top: 0;    left: 0;    z-index: 100;}.navbar-wrap .scrollListBox.fixed {    position: fixed;}.scrollListItem {    font-size: 28rpx;    display: inline-block;    width: 20%;    line-height: 70rpx;    color: #1A1A1A;    text-align: center;}.onScrollNav{     color: #10AEFF;    border-bottom: 2px solid #10AEFF;}.swiperLine {    width: 30px;    height: 3px;    background-color: #10AEFF;    border-radius: 4px;    margin-left: 32rpx;}.swiper-box{ display: block; height: 100%; width: 100%;}
複製代碼

二、頁面內容定義，錨點點擊/滑動跳轉後的位置

<scroll-view scroll-y    scroll-into-view="{{toView}}"    bindscroll="scrollTopFun"    style="height:100vh;background: #f6f8fc;"    scroll-with-animation="true"    >        <!-- 簡介 -->        <view class="navListView" id="list0"></view>
        <!-- 價格 -->        <view class="navListView" id="list1"></view>
        <!-- 周邊 -->        <view class="navListView" id="list2"></view>
        <!-- 附近 -->        <view class="navListView" id="list3"></view></scroll-view>
複製代碼

注：這裏的每一個id都要和上面定義的list裏的id內容一致，使用scroll-view滑動更順暢，感受以前寫的分頁後來加了scroll-view也更順滑，仍是很好用的，以前沒有get到

三、監聽頁面滑動，動態選中當前錨點的導航條

onPageScroll: function(e) {        var that = this;        var scrollTop = parseInt(e.scrollTop); //滾動條距離頂部高度        var isOk = scrollTop >= that.data.navbarInitTop ? true : false;        if (that.data.isFixedTop === isOk) {            return false;        }                that.setData({            isFixedTop: isSatisfy        });},
複製代碼

監聽頁面滑動事件，判斷滾動條滾動的距離和元素初始與頂部的距離，併爲了避免會一直setData則增長死循環判斷isOk 。

四、點擊錨點滑動到頁面導航的位置

經過獲取當前view距離頂部的位置判斷當前展現的內容是第幾個導航條，而後導航條內容高亮展現選中

scrollTopFun: function (e) {        let scrollTop=e.detail.scrollTop;        let scrollArr= this.data.anchorArray;        if(scrollTop>=scrollArr[scrollArr.length-1]){            return;        }else {            for(let i=0;i<scrollArr.length;i++){                if(scrollTop>=0&&scrollTop<scrollArr[0]){                    // navIdx控制篩選塊高亮顯示                    this.setData({                        navIdx: 0                    });                }else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]) {                    this.setData({                        navIdx: i                    });                }            }        }    },    //點擊錨點導航欄    clickScroll: function (e) {        this.setData({            toView: e.target.dataset.id,            navIdx: e.target.dataset.idx        })    },
複製代碼

點擊錨點，就能夠直接定義當前想跳轉的導航內容，經過toView和navIdx直接滑動到目的內容

一共分爲4個步驟，不過不是特別詳細，由於我以爲看這篇文章的人都是想直接解決問題，能夠試下是否能夠，已經用在項目中才分享的~