小編給大家分享一下微信小程序怎么實(shí)現(xiàn)吸頂效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新新互聯(lián)，憑借十余年的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站經(jīng)驗(yàn)，本著真心·誠心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計(jì)網(wǎng)站有上1000+案例。做網(wǎng)站建設(shè)，選創(chuàng)新互聯(lián)建站。

最開始的時(shí)候，在小程序中實(shí)現(xiàn)吸頂效果，開發(fā)工具看起來還挺好的，但是在真機(jī)上就會(huì)有問題了。 原因是我不停的去 setData會(huì)導(dǎo)致操作反饋延遲嚴(yán)重，無法及時(shí)將操作處理結(jié)果及時(shí)傳遞到視圖層。

后面就對代碼進(jìn)行了調(diào)整，避免不停的去setData

效果圖

吸頂前

吸頂后

代碼部分

wxml

 
  新品推薦
  限時(shí)優(yōu)惠
  火爆熱搜
  猜你喜歡
 
 
 




 

wxss

view, text {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

.navbar-wrap {
 width: 100%;
}

.navbar-wrap .column {
 width: 100%;
 height: 80rpx;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-around;
 background: #fff;
 border-bottom: solid 1px #eee;

 top: 0;
 left: 0;
 z-index: 100;
}

.navbar-wrap .column.fixed {
 position: fixed;
}

/* 以下的代碼不重要 */

.navbar-wrap .column .block {
 width: 25%;
 height: 80rpx;
 line-height: 80rpx;
 text-align: center;
 font-size: 30rpx;
 color: #333;
 letter-spacing: 1px;
 position: relative;
}

.navbar-wrap .column .block::after {
 content: "";
 width: 60%;
 height: 3px;
 border-radius: 2px;
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 background: transparent;
}

.navbar-wrap .column .block.active {
 color: #1490ce;
 font-weight: bold;
}

.navbar-wrap .column .block.active::after {
 background: linear-gradient(160deg, rgba(8, 220, 230, 0.7) 10%, rgba(0, 140, 255, 0.7) 90%);
}

js

Page({
 data: {
  navbarInitTop: 0, //導(dǎo)航欄初始化距頂部的距離
  isFixedTop: false, //是否固定頂部
 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function(options) {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function() {
  var that = this;

  if (that.data.navbarInitTop == 0) {

   //獲取節(jié)點(diǎn)距離頂部的距離
   wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) {
    if (rect && rect.top > 0) {
     var navbarInitTop = parseInt(rect.top);
     that.setData({
      navbarInitTop: navbarInitTop
     });
    }
   }).exec();

  }
 },

 /**
  * 監(jiān)聽頁面滑動(dòng)事件
  */
 onPageScroll: function(e) {
  var that = this;
  var scrollTop = parseInt(e.scrollTop); //滾動(dòng)條距離頂部高度

  //判斷'滾動(dòng)條'滾動(dòng)的距離 和 '元素在初始時(shí)'距頂部的距離進(jìn)行判斷
  var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
  //為了防止不停的setData, 這兒做了一個(gè)等式判斷。 只有處于吸頂?shù)呐R界值才會(huì)不相等
  if (that.data.isFixedTop === isSatisfy) {
   return false;
  }

  that.setData({
   isFixedTop: isSatisfy
  });
 }


})

看完了這篇文章，相信你對“微信小程序怎么實(shí)現(xiàn)吸頂效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！