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