微信小程序滚动到某个位置添加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实现超炫的向上滑行菜单实现方法,以一个完整实例形式分析了javascript针对页面元素的遍历与样式操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
lodash里的toLength和toPairs方法详解
这篇文章主要为大家介绍了lodash里的toLength和toPairs方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
JS前端以轻量fabric.js实现示例理解canvas
这篇文章主要为大家介绍了JS前端以轻量fabric.js实现示例理解canvas可视化，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
微信小程序页面开发注意事项整理
这篇文章主要介绍了微信小程序页面开发注意事项整理的相关资料,需要的朋友可以参考下
2017-05-05
JS数组去重详情
这篇文章主要介绍JS数组去重，关于去重实际应用中，最常用的方法就是使用Set，也可以使用第三方库lodash来处理，下面一起来看看文章是怎么介绍JS数组去重的
2021-11-11
微信小程序常见问题总结（4058，40013）及解决办法
这篇文章主要介绍了微信小程序常见问题总结及解决办法的相关资料,这里首先对微信小程序的结构进行了介绍，然后对常见问题进行说明讲解，需要的朋友可以参考下
2017-01-01
svgicon组件使用方法示例详解
这篇文章主要为大家介绍了svgicon组件使用方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
微信小程序商城开发（ecshop ）简单实例
这篇文章主要介绍了微信小程序商城开发（ecshop ）简单实例的相关资料,需要的朋友可以参考下
2017-04-04
Google 地图事件实例讲解
本文主要讲解Google 地图事件,这里整理了Google地图基本事件功能，并提供代码示例以供大家参考，有需要的小伙伴可以参考下
2016-08-08
微信小程序九宫格实例代码
这篇文章主要介绍了微信小程序九宫格实例代码的相关资料,需要的朋友可以参考下
2017-01-01