微信小程序,滑动页面到指定位置,固定元素在顶部

时间:2024-03-03 21:52:07

平常开发中可能会用到,当页面滑动到某一个位置时,需要固定导航栏或者某个元素在顶部位置,向上滑动又会回归原位,方法特别好实现,在小程序自带的方法

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;
}
nav是指未滚动时的默认css
否则就执行愿有的css样式,  我此处需要注意的问题是top属性要定义px的距离单位,如果使用百分比会产生屏幕尺寸问题,
这种写法我这边在开发者工具中显示有些卡顿,真机上还好,日后再改进吧 
 
 
自己记录开发中的小问题,欢迎大家指正