欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)吸頂特效

 更新時間：2020年01月08日 14:26:08   作者：xcjlk  
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)吸頂特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論