在小程序開發(fā)中骄恶，我們經(jīng)常會遇到滾動列表查看的需求，那么使用錨點(diǎn)定位來實(shí)現(xiàn)可以達(dá)到交互體驗(yàn)更加友好的效果，我們看下項(xiàng)目中實(shí)現(xiàn)的效果：
功能實(shí)現(xiàn)
采用小程序視圖容器組件實(shí)現(xiàn)：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是根據(jù)不同機(jī)型的高度動態(tài)計(jì)算出來的琼腔，scroll-view有個重要屬性：scroll-into-view瑰枫，它接收一個string值，即為滾動的地點(diǎn)（錨點(diǎn)）丹莲，那么我們需要在scroll-view子節(jié)點(diǎn)也設(shè)置相應(yīng)的錨點(diǎn)列表：如上圖的class=floorType節(jié)點(diǎn)中的id屬性光坝。這樣我們的滾動就有了一一對應(yīng)的關(guān)系了，在篩選塊點(diǎn)擊樓層甥材，將toView變量設(shè)置成對應(yīng)的數(shù)據(jù)盯另，列表也會滾動到對應(yīng)的位置。
當(dāng)我們滾動列表的時候洲赵，頂部的高亮篩選項(xiàng)也需要對應(yīng)切換鸳惯，那這個時候怎么辦呢？
我們可以在bindscroll此事件上做文章：滾動列表的時候會觸發(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)塊所占頁面高度的數(shù)組總和芝发，用圖可以看得更加清晰一點(diǎn)：
每個錨點(diǎn)塊都有一個固定的高度，我們在拿到數(shù)據(jù)渲染完頁面后苛谷，可以通過
boundingClientRect方法拿到類名為floorType各個節(jié)點(diǎn)的高度辅鲸，并將這些高度裝進(jìn)anchorArray數(shù)組中，那么當(dāng)我們滾動超過某塊錨點(diǎn)高度之后腹殿，頂部篩選項(xiàng)也會隨之切換到下一個瓢湃。
關(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)定位滾動已完成赫蛇，希望能對大家有所幫助绵患，如有問題，歡迎溝通指出悟耘！
