微信小程序 滚动到某个位置添加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 相关文章推荐
用JS控制回车事件的代码
Feb 20 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
js给table赋值的实例代码
Oct 13 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
微信小程序 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
php 更新数据库中断的解决方法
2009/06/05 PHP
javascript事件问题
2009/09/05 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现读取json文件到excel表
2017/11/18 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
优秀生推荐信范文
2013/11/28 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
教师反邪教心得体会
2016/01/15 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
Python实现视频中添加音频工具详解
2021/12/06 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers