Wechat small program to achieve ceiling effect

Time:2020-9-22

This example for you to share the wechat applet to achieve the specific code of the ceiling effect, for your reference, the specific content is as follows

design sketch

Wxml Code:

<view> 
  <van-row custom-class="goods_row" >    
   <van-col span="12" custom-class="title-1">
    Dietotherapy   
   </van-col>
   <van-col span="12" custom-class="title-2" >   
    Action method   
   </van-col>
  </van-row>
</view>

Wxss Code:

/*Start of topping*/
.xiding
{
width: 100%;
height: 30px;
background: white;
}
.title-1
{
 text-align: center;
}
.title-2
{
  text-align: center;
}
/*Imbibition*/
.Fixed
{
 position: fixed;
 top: 0;
 z-index: 2;
}
/*End of topping*/

Wxjs Code:

oneFixed:"",
  tabTop:"0",
  //Dynamic monitoring function of ceiling
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" // add ceiling class
   })
  }
 }
 else
 {
  this.setData({
   oneFixed:''
  })
 }
},


/**
  *Life cycle function -- listening page display
  */
 onShow: function () {
  let This=this;
   const query=wx.createSelectorQuery();
   query.select('#tab').boundingClientRect(function(res)
   {
    This.data.tabTop=res.top//255
   }
   ).exec();
 },

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.