平常开发中可能会用到,当页面滑动到某一个位置时,需要固定导航栏或者某个元素在顶部位置,向上滑动又会回归原位,方法特别好实现,在小程序自带的方法
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;
自己记录开发中的小问题,欢迎大家指正