微信小程序?qū)崿F(xiàn)吸頂特效
更新時間:2020年01月08日 14:26:08 作者:xcjlk
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)吸頂特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?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" >
動作方法
</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",
// 吸頂動態(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)聽頁面顯示
*/
onShow: function () {
let This=this;
const query=wx.createSelectorQuery();
query.select('#tab').boundingClientRect(function(res)
{
This.data.tabTop=res.top//255
}
).exec();
},
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript插入動態(tài)樣式實現(xiàn)代碼
能夠把CSS樣式包含到HTML頁面中的元素有兩個。其中,<link>元素用于包含來自外部的文件,而<style>元素用于指定嵌入的樣式2012-02-02
數(shù)據(jù)排序誰最快(javascript中的Array.prototype.sort PK 快速排序)
今天在51js論壇中看到一個網(wǎng)友發(fā)布了一個javasctipt實現(xiàn)的快速排序的算法,前些日子工作中也涉及到j(luò)avasctipt中數(shù)據(jù)排序的應(yīng)用,當(dāng)時為了提高排序速度,使用的也是快速排序的算法。2007-01-01
JavaScript JSON.stringify()的使用總結(jié)
JSON是一種輕量級數(shù)據(jù)格式,可以方便地表示復(fù)雜數(shù)據(jù)結(jié)構(gòu)。JSON對象有兩個方法:stringify()和parse()。在簡單的情況下,這兩個方法分別可以將JavaScript序列化為JSON字符串,以及將JSON解析為原生JavaScript值。本文著重介紹JSON.stringify()的使用方法和注意事項。2021-05-05
JS實現(xiàn)密碼框根據(jù)焦點的獲取與失去控制文字的消失與顯示效果
這篇文章主要介紹了JS實現(xiàn)密碼框根據(jù)焦點的獲取與失去控制文字的消失與顯示效果,可實現(xiàn)使用JavaScript判斷密碼框是否獲得焦點來隱藏與顯示提示文字,非常簡單實用,需要的朋友可以參考下2015-11-11
javascript 構(gòu)造函數(shù)強制調(diào)用經(jīng)驗總結(jié)
本文將介紹javascript構(gòu)造函數(shù)調(diào)用方面的案例應(yīng)用,需要了解的朋友可以參考下2012-12-12

