微信小程序 滚动到某个位置添加class效果实现代码


Posted in Javascript onApril 19, 2017

微信小程序滚动到某个位置添加class效果

<scroll-view scroll-y="true" style="height:100vh;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-top="{{scrollY}}">
<view>
假设这里有一块内容
</view>
<view class="{{scrollTop>200 ? 'topnav' : ''}}">
  topnav是希望页面滚动到某出添加的类。变成置顶导航。
</view>
。。。。
</scroll-view>

页面结构大致如上。

下面是js

//滚动监听
 scroll: function (e) {

  // console.log(e) ;
  var that = this,scrollTop=that.data.scrollTop;
  that.setData({
   scrollTop:e.detail.scrollTop
  })
  // console.log('e.detail.scrollTop:'+e.detail.scrollTop) ;
  // console.log('scrollTop:'+scrollTop)
 }

data里面先定义一下scrollTop.

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery select选中的一个小问题
Oct 11 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
微信小程序 slider的简单实例
Apr 19 #Javascript
详解Node.js中exports和module.exports的区别
Apr 19 #Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 #Javascript
微信小程序 登录的简单实现
Apr 19 #Javascript
微信小程序开发入门基础教程
Apr 19 #Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 #Javascript
You might like
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
解决python运行启动报错问题
2020/06/01 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Python用SSH连接到网络设备
2021/02/18 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
万年牢教学反思
2014/02/15 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
教师年终个人总结
2015/02/11 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL