위 챗 애플 릿 이 흡 정 효 과 를 실현 하 다.

본 논문 의 사례 는 여러분 에 게 위 챗 애플 릿 이 흡 정 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과 도

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();
 },

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.