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

匿名 (未验证) 提交于 2019-12-02 23:39:01

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

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;
自己记录开发中的小问题,欢迎大家指正
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!