本文例項為大家分享了微信小程式實現吸頂特效的具體程式碼，供大家參考，具體內容如下

效果圖

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"//新增吸頂類
   })
  }
 }
 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();
 },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。