专栏首页喵君手记小程序IntersectionObserver用法

小程序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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • uniapp样式绑定方式

    薛定喵君
  • 微信小程序WXS特征及适用场景

    WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaS...

    薛定喵君
  • 小程序button按钮误触发问题

    最近做小程序碰到一个神奇的现象,页面上定义了一个按钮触发分享, 另外一个同级view标签处理别的事件。 但是点击view标签的时候却触发了分享操作。

    薛定喵君
  • 微信小程序布局

    开始我们的入门后,接下来就可以开始创建我们的第一个demo页面了。按照官网的步骤,在pages模块下新建我们自己的模块demo,添加好对应的文件,然后在app....

    用户2305175
  • 一次使用Kotlin实现酷炫多选操作的尝试

    “手机上的多选很难操作”,我们的设计师Vitaly Rubtsov如是说。大多数应用中的多选方案 -Telegram, Apple Music, Spotif...

    AWeiLoveAndroid
  • WordPress文章版权保护:复制文字自动添加版权信息

    这年头,个人博客抄袭成风;某些博主非常不厚道,常常是原封不动地拿过去,不署名来源是常事,还有更可恨的是说成自己的。本站DeveWork.com 为了不必要的纠纷...

    Jeff
  • 亲测 wordpress复制带本文链接,保护原创

    吾爱乐享
  • 大摩说Waymo值700亿美元,比特斯拉、通用汽车还要高

    李杉 编译自 CNBC 量子位 报道 | 公众号 QbitAI 摩根士丹利在周一发布的研报中表示,Alphabet旗下无人驾驶部门Waymo价值可达到700亿美...

    量子位
  • Facebook开源AI硬件,一口气推出“三件套”

    为了应对大量的算力要求,这家位于Menlo Park的技术巨头,硬是从通用硬件转移到了专用加速器。这些加速器的作用,是保证其数据中心的性能,功耗和效率,特别是在...

    新智元
  • Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

    Jetpropelledsnake21

扫码关注云+社区

领取腾讯云代金券