平常開發中可能會用到,當頁面滑動到某一個位置時,需要固定導航欄或者某個元素在頂部位置,向上滑動又會回歸原位,方法特別好實現,在小程序自帶的方法
onPageScroll中可以得到滑動距離頂部的距離,在data公共數據中定義scrollTop,代碼如下
onPageScroll: function (t) {
var a = this;
// console.log(t.scrollTop)
a.setData({
scrollTop:t.scrollTop
})
}得到滑動距離后,當頁面滑動超出需要固定元素距離頂部的距離后使用css樣式控制其定位,我寫的是一個可以左右滑動的導航欄,因此為要在scroll-view中定義
class="{{scrollTop>758 ? 'rel' : 'nav'}}",758就是我需要定義的模塊距離頂部的距離,當超過這個距離就會執行css的rel樣式
position: fixed;
top:52px;
z-index:999;否則就執行願有的css樣式, 我此處需要注意的問題是top屬性要定義px的距離單位,如果使用百分比會產生屏幕尺寸問題,
這種寫法我這邊在開發者工具中顯示有些卡頓,真機上還好,日后再改進吧
自己記錄開發中的小問題,歡迎大家指正