快捷導(dǎo)航

微信小程序滾動(dòng)到某個(gè)位置添加class效果實(shí)現(xiàn)代碼

更新時(shí)間：2017年04月19日 14:36:08 投稿：lqh

這篇文章主要介紹了微信小程序滾動(dòng)到某個(gè)位置添加class效果實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下

微信小程序滾動(dòng)到某個(gè)位置添加class效果

<scroll-view scroll-y="true" style="height:100vh;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-top="{{scrollY}}">
<view>
假設(shè)這里有一塊內(nèi)容
</view>
<view class="{{scrollTop>200 ? 'topnav' : ''}}">
  topnav是希望頁面滾動(dòng)到某出添加的類。變成置頂導(dǎo)航。
</view>
。。。。
</scroll-view>

頁面結(jié)構(gòu)大致如上。

下面是js

 //滾動(dòng)監(jiān)聽
 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.

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)超炫的向上滑行菜單實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)超炫的向上滑行菜單實(shí)現(xiàn)方法,以一個(gè)完整實(shí)例形式分析了javascript針對(duì)頁面元素的遍歷與樣式操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
lodash里的toLength和toPairs方法詳解
這篇文章主要為大家介紹了lodash里的toLength和toPairs方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas
這篇文章主要為大家介紹了JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas可視化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序頁面開發(fā)注意事項(xiàng)整理
這篇文章主要介紹了微信小程序頁面開發(fā)注意事項(xiàng)整理的相關(guān)資料,需要的朋友可以參考下
2017-05-05
JS數(shù)組去重詳情
這篇文章主要介紹JS數(shù)組去重，關(guān)于去重實(shí)際應(yīng)用中，最常用的方法就是使用Set，也可以使用第三方庫lodash來處理，下面一起來看看文章是怎么介紹JS數(shù)組去重的
2021-11-11
微信小程序常見問題總結(jié)（4058，40013）及解決辦法
這篇文章主要介紹了微信小程序常見問題總結(jié)及解決辦法的相關(guān)資料,這里首先對(duì)微信小程序的結(jié)構(gòu)進(jìn)行了介紹，然后對(duì)常見問題進(jìn)行說明講解，需要的朋友可以參考下
2017-01-01
svgicon組件使用方法示例詳解
這篇文章主要為大家介紹了svgicon組件使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序商城開發(fā)（ecshop ）簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序商城開發(fā)（ecshop ）簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下
2017-04-04
Google 地圖事件實(shí)例講解
本文主要講解Google 地圖事件,這里整理了Google地圖基本事件功能，并提供代碼示例以供大家參考，有需要的小伙伴可以參考下
2016-08-08
微信小程序九宮格實(shí)例代碼
這篇文章主要介紹了微信小程序九宮格實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-01-01