小程序利用scroll-view实现锚点功能
应用场景:横向tab切换时,下面对应的tab_item置顶效果(或者在一定的高度)
index.wxml:
//tab横向导航部分
<scroll-view class="nav" scroll-x="true" style="height:35px;" scroll-into-view="{{leftView}}" enable-flex="true">
<view wx:for="{{tab}}" wx:key="index" class='items {{showId == index ? "active" : ""}}' data-id="{{index}}" id="T{{index}}" wx:key="{{index}}" bindtap="scrollTab">{{item}}</view>
</scroll-view>
//纵向内容部分
<scroll-view class="scroll" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="scrollTo">
<view class="menu_item" wx:for="{{list}}" id="L{{index}}" wx:key="index">
<text class="title">{{item.name}}</text>
</view>
</scroll-view>
index.js:
page({
data:{
showId: 0,
leftView:'T0',
toView: 'L0',
anchorArray:[ ],
},
scrollTab: function (e) {
const showId = e.currentTarget.dataset.id
this.setData({
showId,
toView: 'L' + showId,
leftView: 'T' + showId
})
},
//监听滚动时间 判断高度来实现tab高亮
scrollTo: function (e) {
let scrollTop = e.detail.scrollTop
var _this = this
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]) {
_this.setData({
showId: 0,
leftView:'T'+0
});
} else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]){
_this.setData({
showId: i,
leftView:'T'+i
});
}
}
}
let query = wx.createSelectorQuery().in(_this);
let heightArr = [];
let h = 0;
query.selectAll('.menu_item').boundingClientRect((react) => {
react.forEach((res) => {
h += res.height;
heightArr.push(h)
})
_this.setData({
anchorArray: heightArr
});
}).exec();
},
})
index.wxss:
//去掉滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
!!!scroll-view 父级一定要设置高