本文實例為大家分享了微信小程序實現吸頂特效的具體代碼，供大家參考，具體內容如下
效果圖
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;
}
/* 吸頂結束 */
wxjs代碼：
oneFixed:"",
tabTop:"0",
// 吸頂動態監聽函數
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:''
})
}
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
let This=this;
const query=wx.createSelectorQuery();
query.select('#tab').boundingClientRect(function(res)
{
This.data.tabTop=res.top//255
}
).exec();
},
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
