溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序如何實現(xiàn)特定區(qū)域滾動到頂部時固定

發(fā)布時間：2021-08-07 11:06:14 來源：億速云 閱讀：273 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了微信小程序如何實現(xiàn)特定區(qū)域滾動到頂部時固定，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

項目要求：

微信小程序如何實現(xiàn)特定區(qū)域滾動到頂部時固定

如圖所示，當(dāng)頁面滾動到導(dǎo)航條到達搜索欄下方時固定，向上滾動到導(dǎo)航條位置時又恢復(fù)原樣。
以下是代碼展示：

 1.wxml

<scroll-view  scroll-y="true" bindscroll="scrollTopFun">
  <view class="{{top>130 ? 'topnav' : ''}}">
  <--這里寫大于130，表示距離頂部130rpx時固定，可根據(jù)需要修改-->
    ...
  </view>
</scroll-view>

2.wxss

.topnav{
  position: fixed;
  top: 85rpx;
  z-index:99;
  background: #fff;
  width: 100%;
}

3.js

data = {
 top:0
}
//控制回到頂部按鈕的顯示與消失
scrollTopFun(e){
  let that = this;
  that.top = e.detail.scrollTop;
  that.$apply();
}

其實整個思路很簡單， 小程序自帶的組件scroll-view自帶有屬性bindscroll（滾動時觸發(fā)）。通過這個屬性獲取瀏覽器滾動條距離頂部的位置，通過這個位置判斷class類的顯示就可以了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序如何實現(xiàn)特定區(qū)域滾動到頂部時固定”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手