小程序IntersectionObserver用法

做锡慧在线小程序课程详情页时需要在页面向下滚动的时候显示吸顶锚点菜单,记一下IntersectionObserver的用法

1.显示时机暂定为课程信息移出屏幕的时刻

2.代码如下:
js

this._observer = wx.createIntersectionObserver(this);
this._observer.relativeTo('.jump-list').observe('.course-info', res => {
  this.setData({
    appear: res.intersectionRatio > 0
  });
});

wxml

<view class="sticky-menu" hidden="{{appear}}">
    <view class="item-box">
        <text class="item {{toView=='chapter'?'active':''}}" bindtap="jumpTo" data-optg="chapter">章节</text>
        <text class="item {{toView=='teacher'?'active':''}}" bindtap="jumpTo" data-optg="teacher">教师</text>
        <text class="item {{toView=='school'?'active':''}}" bindtap="jumpTo" data-optg="school">学校</text>
        <text class="item {{toView=='courses'?'active':''}}" bindtap="jumpTo" data-optg="courses">推荐</text>
    </view>
</view>

<scroll-view class="jump-list" style="height: {{scrollViewHeight*2}}rpx"
    scroll-into-view="{{toView}}" 
    scroll-y="true" 
    scroll-with-animation="true">

    <view class="course-info">
        <view class="course-tag">{{course_info.grade_name}} {{course_info.course_name}}</view>
        <view class="title">{{course_info.curriculum_name}}</view>
        <view class="info flex">
            <view class="study-num">
                已有{{course_info.buy_num}}人学习
                <text class="limited">限量{{course_info.max_num}}人</text>
            </view>
            <view wx:if="{{course_info.now_cost!=undefined}}" class="price">{{course_info.now_cost==0?'免费':'￥'+course_info.now_cost}}</view>
        </view>
    </view>
</scroll-view>

3.代码效果