当前位置: 首页 > news >正文

uniapp小程序让页面滚动到底部_uniApp / 小程序实现一个view滚动到一定高度置顶显示...

最近在使用uniApp做一个模仿美团小程序的demo,其中遇到这样一个需求,就是筛选模块滚动到顶部就置顶显示

查阅了uniApp的官方文档以及微信小程序的官方文档,发现都有一个相同的API,如下:

实现思路如下:

1.在onLoad或mounted页面初始化的生命周期方法中获取需要置顶的view距离顶部的高度保存到data中

onLoad() {

// 监听筛选组件距离顶部的距离

const query = wx.createSelectorQuery()

query.select('#boxFixed').boundingClientRect()

query.exec((res)=>{

this.topRange = res[0].top //获取距离顶部的高度并保存

})

},

2.监听页面滚动,当滚动的距离大于上述距离顶部距离则增加一个固定在顶部的样式

// 监听页面滚动距离

onPageScroll(e) {

this.scrollSize = e.scrollTop

}

computed:{

// 监听筛选组件置顶和不置顶

openFixed(){

// 如果页面滚动的高度大于筛选组件距离顶部的高度,那就置顶,反之不置顶

if(this.scrollSize > this.topRange){

console.log('置顶')

this.isfixed = true

}else{

console.log('不置顶')

this.isfixed = false

}

}

}

//当上述isFixed为true的时候需要置顶的view会增加一个样式,使用 position = fixed 脱离文档流

//设置top = 0 即可完成置顶

相关文章:

  • vc读取北通手柄按键_《Spiritfarer》北通宙斯手柄按键功能介绍 手柄控制按键有哪些?...
  • ie print没反应_在IE9下,window.print()不弹出打印对话框的解决办法
  • 编程中的蛇形填空问题_邹军:最实用的数控编程方法,让你编写程序就像做填空题一样简单...
  • linux c++ 邮件客户端_Linux运维架构师-大型网站高并发架构设计-001
  • 保证可见性_JAVA并发编程 如何解决原子性问题
  • 商业方向的大数据专业_商科里的大数据专业,2020最火的商业分析到底有什么魅力?...
  • build unity 丢失_Unity技术分享(71)|Shader|粒子系统|Mesh UV信息丢失...
  • winform 读取用户控件的变量_C# WinForm在高分辨率下界面模糊问题的解决
  • 列表推导式 python_Python进阶 列表推导式详解总结
  • 职务与职级并行套改表_职务职级并行制度详解,“一次套转、两次累计”究竟如何操作?...
  • 如何清空c盘只剩系统_怎么把C盘东西都删除只留系统东西
  • 100级小号搬砖地图_dnf后悔分解魔战套?100级版本还有机会弥补搬砖神装
  • emmx文件用什么软件打开电脑_pdf格式的文件可以用什么软件打开?
  • 可信计算 沈昌祥_沈昌祥:用可信计算筑牢网络安全
  • vue 离开页面时间_Vue.js应用性能优化二