微信小程序滾動(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原型鏈詳解
這篇文要給大家介紹的是JavaScript原型鏈，文章主要介紹內(nèi)容有構(gòu)造函數(shù)、屬性Prototype、屬性Prototype、屬性__proto__、訪問原型上的方法等問題,需要的朋友可以參考一下文章的詳細(xì)內(nèi)容
2021-11-11
淺談克隆 JavaScript
這篇文章主要介紹了克隆 JavaScript,克隆又有淺克隆與深克隆，文章圍繞JavaScript淺克隆與深克隆的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下
2021-10-10
arrify 轉(zhuǎn)數(shù)組實(shí)現(xiàn)示例源碼解析
這篇文章主要為大家介紹了arrify 轉(zhuǎn)數(shù)組實(shí)現(xiàn)示例源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
微信小程序（三）tabBar底部導(dǎo)航詳細(xì)介紹
這篇文章主要介紹了微信小程序（三）tabBar底部導(dǎo)航詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
2016-09-09
ECharts圖表使用及異步加載的特性示例詳解
這篇文章主要為大家介紹了ECharts圖表使用及異步加載的特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)學(xué)生信息管理系統(tǒng),文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)js的小伙伴們有一定的幫助,需要的朋友可以參考下
2021-04-04
quickjs 封裝 JavaScript 沙箱詳情
這篇文章主要介紹了 quickjs 封裝 JavaScript 沙箱，在前文 JavaScript 沙箱探索中聲明了沙箱的接口，并且給出了一些簡單的執(zhí)行任意第三方 js 腳本的代碼，但并未實(shí)現(xiàn)完整的 IJavaScriptShadowbox，下面便講一下如何基于 quickjs 實(shí)現(xiàn),需要的朋友可以參考一下
2021-10-10
微信小程序參數(shù)傳遞詳解
這篇文章主要介紹了微信小程序參數(shù)傳遞詳解的相關(guān)資料,需要的朋友可以參考下
2016-10-10
微信小程序 audio 組件實(shí)例詳解
這篇文章主要介紹了微信小程序 audio 組件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2016-09-09
JS常用正則表達(dá)式超全集(密碼強(qiáng)度校驗(yàn),金額校驗(yàn),IE版本,IPv4,IPv6校驗(yàn))
網(wǎng)上有很多關(guān)于JS常用正則表達(dá)式的文章很全但今天為大家分享一些最新，且非常有用的正則表達(dá)式其中有密碼強(qiáng)度校驗(yàn),金額校驗(yàn),IE版本,IPv4,IPv6校驗(yàn)等
2020-02-02