微信小程序 滚动到某个位置添加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如何设置在iframe框架中指定div不显示
Dec 04 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
DOM 高级编程
May 06 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
js判断节假日实例代码
Dec 27 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php生成随机颜色的方法
2014/11/13 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
javascript jQuery插件练习
2008/12/24 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
vue中element 上传功能的实现思路
2018/07/06 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
2014年保密工作总结
2014/11/22 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
一文搞懂MySQL索引页结构
2022/02/28 MySQL