小程序IntersectionObserver用法

2019-08-05 17:47:46

锡慧在线小程序课程详情页时需要在页面向下滚动的时候显示吸顶锚点菜单,记一下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.代码效果

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
微信扫码关注
领取学习礼包
加入百人技术交流群
探讨前端、小程序开发及逆向、微信开发...
一起学习,共同成长
微信情报 更多 >
    每天进步一点点~