小程序IntersectionObserver用法

举报
薛定喵君 发表于 2021/06/04 01:08:52 2021/06/04
【摘要】 做锡慧在线小程序课程详情页时需要在页面向下滚动的时候显示吸顶锚点菜单,记一下IntersectionObserver的用法 1.显示时机暂定为课程信息移出屏幕的时刻 2.代码如下: js this._observer = wx.createIntersectionObserver(this);this._observer.relativeTo('.jum...

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

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

2.代码如下:
js


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

wxml


    
  1. <view class="sticky-menu" hidden="{{appear}}">
  2. <view class="item-box">
  3. <text class="item {{toView=='chapter'?'active':''}}" bindtap="jumpTo" data-optg="chapter">章节</text>
  4. <text class="item {{toView=='teacher'?'active':''}}" bindtap="jumpTo" data-optg="teacher">教师</text>
  5. <text class="item {{toView=='school'?'active':''}}" bindtap="jumpTo" data-optg="school">学校</text>
  6. <text class="item {{toView=='courses'?'active':''}}" bindtap="jumpTo" data-optg="courses">推荐</text>
  7. </view>
  8. </view>
  9. <scroll-view class="jump-list" style="height: {{scrollViewHeight*2}}rpx"
  10. scroll-into-view="{{toView}}"
  11. scroll-y="true"
  12. scroll-with-animation="true">
  13. <view class="course-info">
  14. <view class="course-tag">{{course_info.grade_name}} {{course_info.course_name}}</view>
  15. <view class="title">{{course_info.curriculum_name}}</view>
  16. <view class="info flex">
  17. <view class="study-num">
  18. 已有{{course_info.buy_num}}人学习
  19. <text class="limited">限量{{course_info.max_num}}</text>
  20. </view>
  21. <view wx:if="{{course_info.now_cost!=undefined}}" class="price">{{course_info.now_cost==0?'免费':'¥'+course_info.now_cost}}</view>
  22. </view>
  23. </view>
  24. </scroll-view>

3.代码效果

文章来源: blog.csdn.net,作者:薛定喵君,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/jsxg2009/article/details/115244279

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200