一种在H5端基于Taro框架的滑动方法与设备与流程

一种在h5端基于taro框架的滑动方法与设备
技术领域
1.本技术涉及计算机技术领域，尤其涉及一种在h5端基于taro框架的滑动的技术。


背景技术：

2.近年来，移动端使用程度不断攀高，前端移动端技术也不断创新。小程序作为继移动app和移动h5技术之后的后起之秀，以其开发周期短，开发包小巧为优势，在移动开发技术中脱颖而出，独树一帜。
3.taro作为一种以react语法进行开发的语言，可以用一套代码开发出多端页面。用taro开发出来的页面程序，通过不同的打包命令，可以编译成微信小程序、京东小程序、拍拍小程序、h5移动页面、百度小程序、支付宝小程序、头条小程序等多端程序包。而这些端的包都可以用一套taro代码来实现，大大提升了移动前端的开发效率。
4.但是taro只是在设计理念上提出一套代码，实现多端打包，并无法在程序的各个细节上做到各个端的效果完全符合产品设计。其中，某些在小程序中可实现的滑动效果却不能在h5端实现，例如，在h5环境下，可能会存在手动点击头部statusbar状态栏部分无法回滚到顶部，或者onpagescroll、onpulldownrefresh、onreachbottom的生命周期函数调用无效或者很难使用等问题。因此，如何使h5端实现与小程序一致的滑动效果需要解决。


技术实现要素：

5.本技术的目的是提供一种在h5端基于taro框架滑动的方法与设备。
6.根据本技术的一个方面，提供了一种在h5端基于taro框架的滑动方法，其中，该方法包括：
7.解除taro框架的h5端视口区域滚动机制，以使文档流高度可大于手机视口区域高度；
8.通过监听h5端原生的scroll滚动事件和/或touch滑动事件，以调用目标文件自动执行对应的生命周期函数，其中，所述生命周期函数包括以下至少任一项：onpagescroll、onpulldownrefresh、onreachbottom。
9.进一步地，其中，当所述生命周期函数包括onpagescroll，所述监听h5端原生的scroll滚动事件和/或touch滑动事件还包括：
10.将滚动高度scrolltop作为属性封装到scroll滚动事件对象中；
11.其中，调用目标文件自动执行对应的生命周期函数包括：
12.以滚动高度scrolltop属性为参数，调用目标文件以执行taro框架中的单页应用页面对象this的onpagescroll函数。
13.进一步地，其中，当所述生命周期函数包括onpulldownrefresh，所述监听h5端原生的scroll滚动事件和/或touch滑动事件还包括：
14.检测是否下拉至文档流滚动高度的零点；
15.其中，调用目标文件自动执行对应的生命周期函数包括：
16.当检测到已下拉至文档流滚动高度的零点，调用目标文件以执行taro框架中的单页应用页面对象this的onpulldownrefresh函数。
17.进一步地，其中，当所述生命周期函数包括onreachbottom，所述监听h5端原生的scroll滚动事件和/或touch滑动事件还包括：
18.基于滚动高度和屏幕高度，动态计算是否滚动到文档流的最底部；
19.其中，调用目标文件自动执行对应的生命周期函数包括：
20.当滚动到文档流的最底部，调用目标文件以执行taro框架中的单页应用页面对象this的onreachbottom函数。
21.优选地，其中，所述方法还包括：使文档流总是拥有预设像素的滚动高度，以阻止阻尼回弹。
22.进一步地，其中，所述目标文件为单独的javascript文件，所述调用目标文件包括：将所述文件的方法import方式引入。
23.根据本技术的另一方面，还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现如前述方法的操作。
24.根据本技术的再一方面，还提供了一种在h5端基于taro框架的滑动设备，其中，该设备包括：
25.一个或多个处理器；以及
26.存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器：解除taro框架的h5端视口区域滚动机制，以使文档流高度可大于手机视口区域高度；通过监听到h5端原生的scroll滚动事件和/或touch滑动事件，以调用目标文件自动执行对应的生命周期函数，其中，所述生命周期函数包括以下至少任一项：onpagescroll、onpulldownrefresh、onreachbottom。
27.与现有技术相比，本技术通过解除taro框架的h5端视口区域滚动机制，以使文档流高度可大于手机视口区域高度，并通过监听到h5端原生的scroll滚动事件和/或touch滑动事件，以调用目标文件自动执行对应的生命周期函数，其中，所述生命周期函数包括以下至少任一项：onpagescroll、onpulldownrefresh、onreachbottom。通过这种方式能够实现与小程序端同样的滑动效果，提升了用户体验。
附图说明
28.通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：
29.图1示出根据本技术一个方面的一种在h5端基于taro框架的滑动的方法流程图。
30.附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
31.下面结合附图对本发明作进一步详细描述。
32.在本技术一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
33.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或
非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
34.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
35.为更进一步阐述本技术所采取的技术手段及取得的效果，下面结合附图及优选实施例，对本技术的技术方案，进行清楚和完整的描述。
36.在本技术中所述方法通过设备1执行，其中，所述设备1包括能够实现本技术的方法的任何设备，例如，所述设备1包括终端设备，其中，所述终端设备包括但不限于任何一种可与用户通过触摸板进行人机交互的移动电子产品，例如智能手机、平板电脑等，所述移动电子产品可以采用任意操作系统，如android操作系统、ios操作系统等。在此，设备1仅为举例，不做具体限定。
37.图1示出本技术一个方面提供的一种在h5端基于taro框架的滑动方法，其中，该方法包括：
38.s11解除taro框架的h5端视口区域滚动机制，以使文档流高度可大于手机视口区域高度；
39.s12通过监听到h5端原生的scroll滚动事件和/或touch滑动事件，以调用目标文件自动执行对应的生命周期函数，其中，所述生命周期函数包括以下至少任一项：onpagescroll、onpulldownrefresh、onreachbottom。
40.在该实施例中，在所述步骤s11中，由于原本taro的h5端的滑动，是一个宽度100％、高度100％的视口区域元素内的滚动，整个文档流就是一个手机的视口大小。点击statusbar区域时，由于文档流并未超过手机的高度，没有发生页面滚动，所以也不会回滚到顶部。其中，所谓的页面内容部分发生的滚动只是那个高度100％的元素区域内发生的滚动，因此，在本方案的步骤s11中，通过解除taro框架的h5端视口区域滚动机制，使文档流高度可大于手机视口区域高度，也即去除那个高度100％元素的高度属性，让其高度随内部内容高度自动伸缩。当内容的高度高于100％的时候，就可以发生文档流滚动，这样系统可以监听到，并且也会减少因滚动到边缘发生阻尼回弹的现象。
41.继续在该实施例中，在所述步骤s12中，通过监听到h5端原生的scroll滚动事件和/或touch滑动事件，以调用目标文件自动执行对应的生命周期函数，其中，所述生命周期函数包括以下至少任一项：onpagescroll、onpulldownrefresh、onreachbottom。在此，所述目标文件封装有可实现与小程序对应生命周期的方法。优选地，所述目标文件为javascript文件。
42.现有的小程序的onpagescroll、onpulldownrefresh、onreachbottom是小程序webview独有的生命周期监听事件，单独的h5端是没有这些事件的。因此，在本方案中会通
过监听到h5端原生的scroll滚动事件和/或touch滑动事件来实现与小程序对应的上述生命周期。
43.优选地，其中，当所述生命周期函数包括onpagescroll，所述步骤s12还包括：将滚动高度scrolltop作为属性封装到scroll滚动事件对象中；
44.其中，调用目标文件自动执行对应的生命周期函数包括：以滚动高度scrolltop属性为参数，调用目标文件以执行taro框架中的单页应用页面对象this的onpagescroll函数。
45.具体地，对h5端进行原生的scroll滚动事件监听，事件的对象即文档流滚动对象document.scrollingelement，将此对象相关的滚动高度scrolltop封装到事件对象event上，即形成小程序事件监听onpagescroll相同的参数。然后，再手动执行taro单页应用页面对象this的onpagescroll，这样就实现了onpagescroll的生命周期。
46.优选地，其中，当所述生命周期函数包括onreachbottom，所述步骤s12还包括：基于滚动高度和屏幕高度，动态计算是否滚动到文档流的最底部；
47.其中，调用目标文件自动执行对应的生命周期函数包括：当滚动到文档流的最底部，调用目标文件以执行taro框架中的单页应用页面对象this的onreachbottom函数。
48.具体地，通过滚动高度和屏幕高度，可以动态计算是否滚动到文档流的最底部，从而达到h5端触底条件，在通过页面对象this，手动触发触底生命周期onreachbottom。优选地，其中，当所述生命周期函数包括onpulldownrefresh，所述步骤s12还包括：检测是否下拉至文档流滚动高度的零点；
49.其中，调用目标文件自动执行对应的生命周期函数包括：当检测到已下拉至文档流滚动高度的零点，调用目标文件以执行taro框架中的单页应用页面对象this的onpulldownrefresh函数。其中，所述方法还包括：使文档流总是拥有预设像素的滚动高度，以阻止阻尼回弹。
50.具体地，当下拉至文档流滚动高度的零点时，滚动无法继续监听，此时容易产生向下的阻尼回弹，这时可以使用程序让文档流总是拥有1像素的滚动高度，阻止阻尼回弹。同时使用touch监听，并给文档流一个位移模拟下拉刷新效果，并手动触发页面对象this的onpulldownrefresh下拉生命周期。
51.具体地，上述执行生命周期的方法scrolllistener可放在单独的javascript文件里，只能应用于taro项目。当taro项目需要使用时，首先要将该文件的方法import方式引入：
52.import utils from'@/utils'，const{scrolllistener}＝utils。
53.然后，需要执行该引入方法，并且该方法返回页面滚动对象，方便在需要的时候，使用程序滚动到页面内容的任何位置。以下代码是方法执行和对返回的滚动对象进行句柄赋值：this.scrolldom＝scrolllistener(this)。
54.以上代码方法执行的时候需要将taro的h5单页页面对象this传入，在scrolllistener内部，使用此对象，自动执行生命周期函数。这样就给h5挂载了onpagescroll、onpulldownrefresh、onreachbottom这些生命周期，针对这些周期函数进行监听，书写触发时的逻辑，可以实现一套代码的多端滑动和滚动效果。但是，小程序的pagescrollto方法不是周期函数，无法自动挂载，所以当实现类似点击按钮锚点到页面任
意位置时，还是要兼容性写法去滚动，这时候h5的滚动对象句柄可以有所帮助，代码如下：
[0055][0056]
而页面的onpagescroll、onpulldownrefresh、onreachbottom则可以实现多端的效果。onpagescroll的监听如下：
[0057][0058]
以下是页面onreachbottom周期监听，适用于列表数据加载下一页：
[0059][0060]
以下是下拉刷新周期onpulldownrefresh的监听：
[0061]
[0062][0063]
这样使用后，taro的h5端就有了小程序端滑动方面的所有能力，且滑动效果跟小程序端没有太大出入，实现了滑动方面真正意义的多端统一。
[0064]
此外，本技术实施例还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现前述方法。
[0065]
另外，本技术还提供了一种在h5端基于taro框架的滑动设备，其中，该设备包括：
[0066]
一个或多个处理器；以及
[0067]
存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行前述方法的操作。
[0068]
例如，计算机可读指令在被执行时使所述一个或多个处理器：解除taro框架的h5端视口区域滚动机制，以使文档流高度可大于手机视口区域高度；通过监听h5端原生的scroll滚动事件和/或touch滑动事件，以调用目标文件自动执行对应的生命周期函数，其中，所述生命周期函数包括以下至少任一项：onpagescroll、onpulldownrefresh、onreachbottom。
[0069]
与现有技术相比，本技术通过解除taro框架的h5端视口区域滚动机制，以使文档流高度可大于手机视口区域高度，并通过监听到h5端原生的scroll滚动事件和/或touch滑动事件，以调用目标文件自动执行对应的生命周期函数，其中，所述生命周期函数包括以下至少任一项：onpagescroll、onpulldownrefresh、onreachbottom。通过这种方式能够实现与小程序端同样的滑动效果，提升了用户体验。
[0070]
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。