(19)中华 人民共和国 国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210026659.9 (22)申请日 2022.01.11 (71)申请人 上海万物新 生环保科技 集团有限公 司 地址 200433 上海市杨 浦区淞沪路43 3号 1101-1103室 (72)发明人 司云可　吴义良　 (74)专利代理 机构 上海百一领御专利代理事务 所(普通合伙) 31243 代理人 邵栋 (51)Int.Cl. G06F 9/451(2018.01) G06F 9/54(2006.01) (54)发明名称 一种在H5端基于Taro框架的滑动方法与设 备 (57)摘要 本申请的目的是提供一种在H5端基于Taro 框架的滑动方法与设备。 与现有技术相比， 本申 请通过解除Taro框架的H5端视口区域滚动机制， 以使文档流高度可大于手机视口区域高度， 并通 过监听到H5端原生的scroll滚动事件和/或 touch滑动事件， 以调用目标文件自动执行对应 的生命周 期函数， 其中， 所述生命周 期函数包括 以 下 至 少 任 一 项 ：o n P a g e S c r o l l 、 onPullDownRefresh、 onReachBottom。 通过这种 方式能够实现与小程序端同样的滑动效果， 提升 了用户体验。 权利要求书1页 说明书6页 附图1页 CN 114428657 A 2022.05.03 CN 114428657 A 1.一种在H 5端基于Taro框架的滑动方法， 其中， 该 方法包括： 解除Taro框架的H 5端视口区域滚动机制， 以使 文档流高度可 大于手机 视口区域高度； 通过监听H5端原生的scroll滚动事件和/或touch滑动事件， 以调用目标文件自动执行 对应的生命周期函数， 其中， 所述生命周期函数包括以下至少任一项： onPageScroll、 onPullDownRefresh、 o nReachBottom。 2.根据权利要求1所述的方法， 其中， 当所述生命周期函数包括onPageScroll， 所述监 听H5端原生的scro ll滚动事件和/或touc h滑动事件还包括： 将滚动高度scro llTop作为属性封装到scro ll滚动事件对象中； 其中， 调用目标文件自动执 行对应的生命周期函数包括： 以滚动高度scrollTop属性为参数， 调用目标文件以执行Taro框架中的单页应用页面 对象this的o nPageScroll函数。 3.根据权利要求1所述的方法， 其中， 当所述生命周期函数包括onPullDownRefresh， 所 述监听H5端原生的scro ll滚动事件和/或touc h滑动事件还包括： 检测是否下拉至文档流滚动高度的零 点； 其中， 调用目标文件自动执 行对应的生命周期函数包括： 当检测到已下拉至文档流滚动高度的零点， 调用目标文件以执行Taro框架中的单页应 用页面对象this的o nPullDownRefresh函数。 4.根据权利要求1所述的方法， 其 中， 当所述生命周期函数包括onReachBottom， 所述监 听H5端原生的scro ll滚动事件和/或touc h滑动事件还包括： 基于滚动高度和屏幕高度， 动态计算是否滚动到文档流的最底部； 其中， 调用目标文件自动执 行对应的生命周期函数包括： 当滚动到文档流的最底部， 调用目标文件以执行Taro框架中的单页应用页面对象this 的onReachBottom函数。 5.根据权利要求3或4所述的方法， 其中， 所述方法还 包括： 使文档流总是拥有预设像素的滚动高度， 以阻止阻尼回弹。 6.根据权利要求1至5中任一项所述的方法， 其中， 所述目标文件为单独的javascript 文件， 所述调用目标文件 包括： 将所述文件的方法impor t方式引入。 7.一种计算机可读介质， 其上存储有计算机可读指令， 所述计算机可读指令可被处理 器执行以实现如权利要求1至 6中任一项所述的方法。 8.一种在H 5端基于Taro框架的滑动设备， 其中， 该设备包括： 一个或多个处 理器； 以及 存储有计算机可读指令的存储器， 所述计算机可读指令在被执行时使所述处理器执行 如权利要求1至 6中任一项所述方法的操作。权　利　要　求　书 1/1 页 2 CN 114428657 A 2一种在H5端基于 Taro框架的滑动方 法与设备 技术领域 [0001]本申请涉及计算机技 术领域， 尤其涉及一种在H 5端基于Taro框架的滑动的技 术。 背景技术 [0002]近年来， 移动端使用程度不断攀高， 前端移动端技术也不断创新。 小程序作为继移 动app和移动H5技术之后的后起之秀， 以其开发周期短， 开发包小巧为优势， 在移动开发技 术中脱颖而出， 独树 一帜。 [0003]Taro作为一种以React语法进行开发的语言， 可以用一套代码 开发出多端页面。 用 Taro开发出来的页面程序， 通过不同的打包命令， 可以编译成微信小程序、 京东小程序、 拍 拍小程序、 H5移动页面、 百度小程序、 支 付宝小程序、 头条小程序等多端程序包。 而这些端的 包都可以用一套 Taro代码来实现， 大 大提升了移动前端的开发效率。 [0004]但是Taro只是在设计理念上提出一套代码， 实现多端打包， 并无法在程序的各个 细节上做到各个端的效果完全符合产品设计。 其中， 某些在小程序中可实现的滑动效果却 不能在H5端实现， 例如， 在H5环境下， 可能会存在手动点击头部statusBar状态栏部分无法 回滚到顶部， 或者onPageScroll、 onP ullDownRefresh、 onReachBotto m的生命周期函数调用 无效或者很难使用等问题。 因此， 如何使H 5端实现与小程序一 致的滑动效果需要解决。 发明内容 [0005]本申请的目的是提供一种在H 5端基于Taro框架 滑动的方法与设备。 [0006]根据本申请的一个方面， 提供了一种 在H5端基于Taro框架的滑动方法， 其中， 该方 法包括： [0007]解除Taro框架的H5端视口区域滚动机制， 以使文档流高度可大于手机视口区域高 度； [0008]通过监听H5端原生的scroll滚动事件和/ 或touch滑动事件， 以调用目标文件自动 执行对应的生命周期函数， 其中， 所述生命周期函数包括以下至少任一项： onPageScroll、 onPullDownRefresh、 o nReachBottom。 [0009]进一步地， 其中， 当所述生命周期函数包括onPageScroll， 所述监听H5端原生的 scroll滚动事件和/或touc h滑动事件还包括： [0010]将滚动高度scro llTop作为属性封装到scro ll滚动事件对象中； [0011]其中， 调用目标文件自动执 行对应的生命周期函数包括： [0012]以滚动高度scrollTop属 性为参数， 调用目标文件以执行Taro框架中的单页应用 页面对象this的o nPageScroll函数。 [0013]进一步地， 其中， 当所述生命周期函数包括onPullDownRefresh， 所述监听H5端原 生的scro ll滚动事件和/或touc h滑动事件还包括： [0014]检测是否下拉至文档流滚动高度的零 点； [0015]其中， 调用目标文件自动执 行对应的生命周期函数包括：说　明　书 1/6 页 3 CN 114428657 A 3