微信小程式導航欄或選單欄吸頂效果簡單實現

2021-09-11 03:48:25 字數 836 閱讀 1229

思路:

1、獲取導航欄初始位置距頂部的距離s1(通過獲取頁面標籤方法)

2、監聽頁面的滑動,獲取滑動距離s2(使用onpagescroll)

3、當s2>=s1時,給導航欄增加固定的樣式(position:fixed)

**:

1、導航欄

2、固定到頂部的樣式

.fixed
3、獲取導航欄初始位置距頂部的距離

var _this = this;

var query = wx.createselectorquery()

query.select('#affix').boundingclientrect();

query.selectviewport().scrolloffset();

query.exec(function(res) )

})

4、監聽頁面的滑動,獲取滑動距離,比較並設定樣式

// 監聽頁面滾動距離

onpagescroll: function(e) )

},

最後效果:

微信小程式 tab 導航欄切換

wx key 如果列表中專案的位置會動態改變或者有新的專案新增到列表中,並且希望列表中的專案保持自己的特徵和狀態 如 中的輸入內容,的選中狀態 需要使用 wx key 來指定列表中專案的唯一的識別符號。wx key 的值以兩種形式提供 字串,代表在 for 迴圈的 array 中 item 的某個 ...

微信小程式tabBar 底部選單欄不顯示的問題解決

問題闡述 pages pages index index pages todo todo pages diary diary pages record record window tabbar 問題解決 1 將pages中的tab頁面放到前面,但是index會無法顯示,頁面直接是tab內容 page...

微信分享選單欄顯示,隱藏

如果在頁面上禁止了分享,在分享頁需要加上顯示分享選單才可以,不然在ios上會出現所有都無法分享 在自己分享的js裡頭改,有可能不是下面的那樣,但是都是 showoptionmenu,hideoptionmenu這倆個 參考function onbridgeready if typeof weixin...