小程序 WXS響應事件（滾動菜單欄tab吸頂）

解決問題：
小程序頁面滾動，tab觸頂吸頂

解決辦法：
1）頁面滾動事件中監聽處理（不推薦）
缺點：在安卓端性能非常差，吸頂效果反應遲鈍，不流暢等問題。

2）WXS響應事件（推薦）

index.WXML <wxs module="test" src="./test.wxs"></wxs> // 引入wxs// 頁面滾動組件 <scroll-viewbindscroll="{{test.funcA}}"data-top-height="{{530}}" style='height:100%;'scroll-yscroll-with-animation="true"><view class="page-group-interaction page-group"><view class="page-nav-list"><text>首頁</text></view><view class="page-nav-list"><text>活動</text></view><view class="page-nav-list"><text>菜單</text></view><view class="page-nav-list"><text>我的</text></view></view> </scroll-view> <!-- scroll-view滾動組件 bindscroll 監聽滾動事件 （必須） bindscrolltolower 滾動到頂部/左邊時觸發 bindscrolltoupper 滾動到底部/右邊時觸發 data-top-height 傳值 （必須） style='height:100%;'（必須，必須寫上100%高度，不然觸發不了滾動事件）--> index.wxs var funcA = function (e, ins) {var scrollTop = e.detail.scrollTop; // 滾動條距離頁面頂部的距離var topHeight = e.currentTarget.dataset.topHeight; // 接收傳值，tab距離頁面頂部的距離if (scrollTop > topHeight ) {ins.selectComponent('.page-group').setStyle({// 吸頂"background-color": 'c'}).addClass('page-group-fixed')} else {ins.selectComponent('.page-group').setStyle({"background-color": 'rgba(00, 00, 00, ' + Math.max(0, (scrollTop) / 100) + ')'}).removeClass('page-group-position')} } module.exports = {funcA: funcA } .page-group-fixed{position: fixed;top: 0;left: 0;z-index: 1000;box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(196, 196, 196, 0.1); }

注意：
1）頁面使用scroll-view滾動代替頁面滾動之后，上拉下拉加載之類的都要用scroll-view的事件來處理

2）滾動視圖組件設置了style ='height：100％;'屬性，必須寫上100%高度，不然觸發不了滾動視圖組件滾動事件

3）查看小程序 scroll-view官方文檔

總結

以上是生活随笔為你收集整理的小程序 WXS响应事件（滚动菜单栏tab吸顶）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。