支付宝小程序滚动监听吸顶效果

axml部分

<view class=" {{menuFixed ? ‘fixed‘: ‘‘}}" id="affix">菜单栏</view>

axss部分

.fixed{position: fixed; top: 0; }

js部分

Page({
  data: {
    menuFixed:"",
  },
  // 监听页面滚动距离scrollTop
  onPageScroll: function(e) {
    var that = this;
    // 3.当页面滚动距离scrollTop > 菜单栏距离文档顶部的距离时,菜单栏固定定位
    if (e.scrollTop > 500) {
      that.setData({
        menuFixed: true
      })
    } else {
      that.setData({
        menuFixed: false
      })
    }
  },

原文地址:https://www.cnblogs.com/fms-3/p/10180221.html

时间: 2024-08-27 19:57:16

支付宝小程序滚动监听吸顶效果的相关文章

微信小程序 watch监听数据变化 类似vue中的watch

1.参考 https://github.com/donghaohao/vuefy 2.项目使用 列表循环  图片上传对应每个学生 需要监听学生的变化  上传对应的图片 原文地址:https://www.cnblogs.com/zhengao/p/10734826.html

js相关小实例——滚动监听

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

【bootstrapV3】移动端和PC端的 滚动监听

1.本代码适用于 bootstrap V3 的 页面滚动监听 2.效果: 3.代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,

Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果

我之前写了一篇关于美团网,大众点评的购买框效果的文章Android对ScrollView滚动监听,实现美团.大众点评的购买悬浮效果,我自己感觉效果并不是很好,如果快速滑动界面,显示悬浮框的时候会出现一卡的现象,有些朋友说有时候会出现两个布局的情况,特别是对ScrollView滚动的Y值得监听,我还使用了Handler来获取,还有朋友给我介绍了Scrolling Tricks这个东西,我下载试了下,确实美团网,大众点评的购买框用的是这种效果,但是Scrolling Tricks只能在API11以上

支付宝小程序注意事项

1.支付宝小程序和微信小程序的开发流程及逻辑代码几乎相同,它的开发者工具名称由蚂 蚁金服而来,其文件组成由js,json,acss,axml组成. 2.支付宝小程序在生命周期函数中多了个onTitleClick函数(标题被点击时). 3.视图层和微信小程序的视图层数据的渲染区别在于,支付宝是以a:开头,而微信是以wx: 开头. **```4.其中点击事件是以onTap或catchTap进行绑定,它们的区别在于on 事件绑定不会阻止 冒泡事件向上冒泡,catch 事件绑定可以阻止冒泡事件向上冒泡*

滚动监听(bootstrap)

1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.static.runoob.com

Bootstrap入门(二十六)JS插件3:滚动监听

很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这将是该元素<body>).然后添加data-target任何引导的父元素的ID或类属性.nav的组件. 我们来写一个基本的实例 先引入CSS文件 <link href="bootstrap.min.css" rel="stylesheet"> 我

bootstrap滚动监听

Bootstrap ScrollSpy(滚动监听)是bootstrap插件提供的一个非常有趣的功能.当页面空间有限的时候我们可以利用它来显示我们想要显示的内容 官方说的想要利用此功能需要引入以下文件: bootstrap/css/bootstrap.css    jquery.1.9.1.js    bootstrap.js    bootstrap-dropdown.js    bootstrap-scrollspy.js 不过经过测试 只需要前三个即可 以下是我测试的代码: <!DOCTYP

bootstap 滚动监听

---首先结合源代码介绍官网的说明 ---然后总结了使用滚动监听的几个步骤 ---最后给出一个简单的例子 ---关键的一点:整体有点零散和乱七八糟,辛苦你的思维和眼睛了,呵呵 ---------------------------------------------------------------------------------------------------------- 1. Scrollspy currently requires the use of a Bootstrap