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

小程序员 scroll滚动与页面滚动冲突造成快速滑到底部卡顿失败问题

问题

当页面使用scroll-view, 内容过多产生滚动时, 如果scrollview 的高度未配置ok,页面滚动功能和scroll-view会产生冲突,滑动到最头或者最底会有卡顿现象,是因为一会scroll滚动,一会是页面滚动,

如下源码:

<nav title="Demo"></nav>
<scroll-view style="margin-top:{{nav_height}}px;height:{{windowH}}px;"scroll-y scroll-with-animation bindscrolltolower="nextPage"><view class="mt40" id="s_top"></view><product wx:for="{{list.data}}" ></productCard><view  class="end">没有更多数据了~~</view>
</scroll-view>

加上bindscroll="scrollEvent", js写上onPageScroll, scrollEvent事件,可以用看到,执行不同的滚动。

 onPageScroll(){console.log(">>>pageScroll")},scrollEvent(options) {console.log(">>> scroll")if (options.detail.scrollTop >= (this.data.windowH - this.data.nav_height)) {this.setData({hiddenTopBtn: false})} else {this.setData({hiddenTopBtn: true, s_top: ""})}},

解决办法:

让scroll-view包裹页面所有内容

当需要悬浮导航栏的时候 监听scroll-view的距离顶部的高度

<nav title="DEMO" hiddenBack="true"></nav>
<scroll-view style="height:{{windowH-nav_height}}px;margin-top:{{nav_height}}px;overflow: scroll;"scroll-y scroll-with-animation bindscrolltolower="nextPage" bindscroll="scrollEvent"><product wx:for="{{list.data}}" ></product><view " class="end">没有更多数据了~~</view></scroll-view>

相关文章:

  • 蓝桥杯官网填空题(激光样式)
  • C#解析XML并反序列化为Model的方法
  • ubuntu20.04 安装cudnn
  • 单链表(3)
  • 成绩公布方式,这样操作更方便
  • 十三、W5100S/W5500+RP2040树莓派Pico<FTP Server>
  • ActiveMq学习⑨__基于zookeeper和LevelDB搭建ActiveMQ集群
  • 论文阅读:Ensemble Knowledge Transfer for Semantic Segmentation
  • 阿里云99元服务器2核2G3M带宽_4年396元_新老用户均可
  • VScode + opencv + c++ + win配置教程
  • 初识微服务技术栈
  • iOS 让界面元素的文字随着语言的更改而变化——本地化文字跟随
  • 如何在 Unbuntu 下安装配置 Apache Zookeeper
  • 一触即发!拓世法宝商业数字人一体机,化身数字员工,助你开拓连锁餐饮市场
  • 工程车云管家|叉车智能管家安卓主板方案
  • 9月CHINA-PUB-OPENDAY技术沙龙——IPHONE
  • 002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript
  • 0x05 Python数据分析,Anaconda八斩刀
  • Github访问慢解决办法
  • IOS评论框不贴底(ios12新bug)
  • iOS筛选菜单、分段选择器、导航栏、悬浮窗、转场动画、启动视频等源码
  • iOS小技巧之UIImagePickerController实现头像选择
  • Java应用性能调优
  • k个最大的数及变种小结
  • Linux下的乱码问题
  • node 版本过低
  • Vue 重置组件到初始状态
  • weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架
  • 订阅Forge Viewer所有的事件
  • 机器学习学习笔记一
  • 如何使用 JavaScript 解析 URL
  • #我与Java虚拟机的故事#连载08:书读百遍其义自见
  • (2)STM32单片机上位机
  • (2021|NIPS,扩散,无条件分数估计,条件分数估计)无分类器引导扩散
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • ./和../以及/和~之间的区别
  • .describe() python_Python-Win32com-Excel
  • .NET Compact Framework 3.5 支持 WCF 的子集
  • .net core webapi Startup 注入ConfigurePrimaryHttpMessageHandler
  • .Net面试题4
  • /*在DataTable中更新、删除数据*/
  • /dev下添加设备节点的方法步骤(通过device_create)
  • @vue/cli 3.x+引入jQuery
  • [ C++ ] STL---string类的模拟实现
  • [ Linux 长征路第二篇] 基本指令head,tail,date,cal,find,grep,zip,tar,bc,unname
  • [2024] 十大免费电脑数据恢复软件——轻松恢复电脑上已删除文件
  • [ACL2022] Text Smoothing: 一种在文本分类任务上的数据增强方法
  • [Bada开发]初步入口函数介绍
  • [C#C++]类CLASS
  • [C/C++] -- 二叉树
  • [C/C++]数据结构----顺序表的实现(增删查改)
  • [C++] 统计程序耗时
  • [Contiki系列论文之2]WSN的自适应通信架构
  • [C语言][PTA基础C基础题目集] strtok 函数的理解与应用
  • [C语言]——C语言常见概念(1)