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

更新时间：2017年04月19日 14:36:08 投稿：lqh

这篇文章主要介绍了微信小程序滚动到某个位置添加class效果实现代码的相关资料,需要的朋友可以参考下

微信小程序滚动到某个位置添加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原型链详解
这篇文要给大家介绍的是JavaScript原型链，文章主要介绍内容有构造函数、属性Prototype、属性Prototype、属性__proto__、访问原型上的方法等问题,需要的朋友可以参考一下文章的详细内容
2021-11-11
浅谈克隆 JavaScript
这篇文章主要介绍了克隆 JavaScript,克隆又有浅克隆与深克隆，文章围绕JavaScript浅克隆与深克隆的相关资料展开具体内容,需要的朋友可以参考一下
2021-10-10
arrify 转数组实现示例源码解析
这篇文章主要为大家介绍了arrify 转数组实现示例源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
微信小程序（三）tabBar底部导航详细介绍
这篇文章主要介绍了微信小程序（三）tabBar底部导航详细介绍的相关资料,需要的朋友可以参考下
2016-09-09
ECharts图表使用及异步加载的特性示例详解
这篇文章主要为大家介绍了ECharts图表使用及异步加载的特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
JavaScript+HTML实现学生信息管理系统
这篇文章主要介绍了JavaScript实现学生信息管理系统,文中有非常详细的代码示例,对正在学习js的小伙伴们有一定的帮助,需要的朋友可以参考下
2021-04-04
quickjs 封装 JavaScript 沙箱详情
这篇文章主要介绍了 quickjs 封装 JavaScript 沙箱，在前文 JavaScript 沙箱探索中声明了沙箱的接口，并且给出了一些简单的执行任意第三方 js 脚本的代码，但并未实现完整的 IJavaScriptShadowbox，下面便讲一下如何基于 quickjs 实现,需要的朋友可以参考一下
2021-10-10
微信小程序参数传递详解
这篇文章主要介绍了微信小程序参数传递详解的相关资料,需要的朋友可以参考下
2016-10-10
微信小程序 audio 组件实例详解
这篇文章主要介绍了微信小程序 audio 组件实例详解的相关资料,需要的朋友可以参考下
2016-09-09
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
网上有很多关于JS常用正则表达式的文章很全但今天为大家分享一些最新，且非常有用的正则表达式其中有密码强度校验,金额校验,IE版本,IPv4,IPv6校验等
2020-02-02