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

论坛 期权论坛 脚本     
匿名技术用户   2021-1-16 01:49   197   0

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

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的距离单位,如果使用百分比会产生屏幕尺寸问题,
这种写法我这边在开发者工具中显示有些卡顿,真机上还好,日后再改进吧
自己记录开发中的小问题,欢迎大家指正

转载于:https://www.cnblogs.com/lishuang2243/p/10998432.html

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP