微信小程序?qū)崿F(xiàn)吸頂特效
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)吸頂特效的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
wxml代碼:
<view class="xiding {{oneFixed}}" id="tab"> <van-row custom-class="goods_row" > <van-col span="12" custom-class="title-1"> 食療方法 </van-col> <van-col span="12" custom-class="title-2" > 動(dòng)作方法 </van-col> </van-row> </view>
wxss代碼:
/* 吸頂開始 */ .xiding { width: 100%; height: 30px; background: white; } .title-1 { text-align: center; } .title-2 { text-align: center; } /* 吸頂 */ .Fixed { position: fixed; top: 0; z-index: 2; } /* 吸頂結(jié)束 */
wxjs代碼:
oneFixed:"", tabTop:"0", // 吸頂動(dòng)態(tài)監(jiān)聽函數(shù) onPageScroll:function(event) { console.log(event.scrollTop > this.data.tabTop) if(event.scrollTop>this.data.tabTop) { if(this.data.tabFix) { return } else{ this.setData({ oneFixed:"Fixed"http://添加吸頂類 }) } } else { this.setData({ oneFixed:'' }) } }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示 */ onShow: function () { let This=this; const query=wx.createSelectorQuery(); query.select('#tab').boundingClientRect(function(res) { This.data.tabTop=res.top//255 } ).exec(); },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS中獲取 DOM 元素的絕對(duì)位置實(shí)例詳解
這篇文章主要介紹了JS中獲取 DOM 元素的絕對(duì)位置,詳細(xì)介紹了各種獲取dom元素絕對(duì)位置的方法及對(duì)應(yīng)的兼容性,需要的朋友參考下吧2018-04-04JavaScript插入動(dòng)態(tài)樣式實(shí)現(xiàn)代碼
能夠把CSS樣式包含到HTML頁(yè)面中的元素有兩個(gè)。其中,<link>元素用于包含來(lái)自外部的文件,而<style>元素用于指定嵌入的樣式2012-02-02數(shù)據(jù)排序誰(shuí)最快(javascript中的Array.prototype.sort PK 快速排序)
今天在51js論壇中看到一個(gè)網(wǎng)友發(fā)布了一個(gè)javasctipt實(shí)現(xiàn)的快速排序的算法,前些日子工作中也涉及到j(luò)avasctipt中數(shù)據(jù)排序的應(yīng)用,當(dāng)時(shí)為了提高排序速度,使用的也是快速排序的算法。2007-01-01微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JavaScript JSON.stringify()的使用總結(jié)
JSON是一種輕量級(jí)數(shù)據(jù)格式,可以方便地表示復(fù)雜數(shù)據(jù)結(jié)構(gòu)。JSON對(duì)象有兩個(gè)方法:stringify()和parse()。在簡(jiǎn)單的情況下,這兩個(gè)方法分別可以將JavaScript序列化為JSON字符串,以及將JSON解析為原生JavaScript值。本文著重介紹JSON.stringify()的使用方法和注意事項(xiàng)。2021-05-05JS實(shí)現(xiàn)密碼框根據(jù)焦點(diǎn)的獲取與失去控制文字的消失與顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)密碼框根據(jù)焦點(diǎn)的獲取與失去控制文字的消失與顯示效果,可實(shí)現(xiàn)使用JavaScript判斷密碼框是否獲得焦點(diǎn)來(lái)隱藏與顯示提示文字,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-11-11javascript 構(gòu)造函數(shù)強(qiáng)制調(diào)用經(jīng)驗(yàn)總結(jié)
本文將介紹javascript構(gòu)造函數(shù)調(diào)用方面的案例應(yīng)用,需要了解的朋友可以參考下2012-12-12