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

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎ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í)有所幫助，也希望大家多多支持我們。

上一篇：Nodejs + Websocket 指定發(fā)送及群聊的實(shí)現(xiàn)

欄目：JavaScript

下一篇：Vue-axios-post數(shù)據(jù)后端接不到問(wèn)題解決

本文標(biāo)題：微信小程序?qū)崿F(xiàn)吸頂特效

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9247.html

更多JavaScript

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

JavaScript

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀