[发明专利]一种轮播图片显示方法以及轮播图片显示装置

说明书

本申请提供一种轮播图片显示方法以及轮播图片显示装置，该方法包括：通过Scroll View的on Scroll End Drag函数监听用户对终端的屏幕上的目标展示页面中显示的目标图片的滑动操作；响应于监听到的滑动操作，获取目标图片的偏移坐标；根据偏移坐标，确定在目标展示页面中显示目标图片或者目标图片的下一图片。这样，可以通过Scroll View的on Scroll End Drag函数监听用户对终端的屏幕上的目标展示页面中显示的目标图片的滑动操作。然后，响应于监听到的滑动操作，可以获取目标图片的偏移坐标。接下来，可以根据偏移坐标，确定在目标展示页面中显示目标图片或者目标图片的下一图片。避免出现切换页面和切换轮播图片相互影响的情况。

技术领域

本申请涉及通信技术领域，尤其涉及一种轮播图片显示方法以及轮播图片显示装置。

背景技术

React Native是Facebook开发的开源跨平台移动应用开发框架，其使用JavaScript这种编码语言。react-native-tab-view是基于React Native的Tab View组件。可以在react-native-tab-view中显示多个页面，当用户使用手指在终端的屏幕上左右滑动时，可以实现切换显示不同页面的内容。

现有技术中，在页面内显示轮播图片时，用户可以使用手指在屏幕上对应显示轮播图片的区域进行左右滑动。由于页面的切换和轮播图片的切换均是基于用户的手势实现的，因此当用户在屏幕上对应显示轮播图片的区域进行操作时，会出现无法判断出应该切换页面还是应该切换轮播图片的情况。

发明内容

本申请提供了一种轮播图片显示方法以及轮播图片显示装置，以解决现有技术中，在页面内显示轮播图片，当用户在屏幕上对应显示轮播图片的区域进行操作时，会出现无法判断出应该切换页面还是应该切换轮播图片的情况的问题。

第一方面，本发明提供了一种轮播图片显示方法，包括：

通过Scroll View的on Scroll End Drag函数监听用户对终端的屏幕上的目标展示页面中显示的目标图片的滑动操作，其中，所述目标展示页面为react-native-tab-view所显示的目标应用程序的多个展示页面中的一个展示页面；

响应于监听到的所述滑动操作，获取所述目标图片的偏移坐标；

根据所述偏移坐标，确定在所述目标展示页面中显示所述目标图片或者所述目标图片的下一图片，其中，所述目标图片为多张轮播图片中的一张轮播图片，图片队列包含位于起始位置的第一参考图片、位于末端位置的第二参考图片以及位于所述起始位置和所述末端位置之间，依次排列的所述多张轮播图片，所述目标图片的下一图片为所述多张轮播图片中，与所述目标图片相邻序列的图片。

进一步的，所述根据所述偏移坐标，确定在所述目标展示页面中显示所述目标图片或者所述目标图片的下一图片，包括：

计算所述偏移坐标与所述目标图片的目标宽度的比值；

在所述比值小于预设阈值的情况下，确定在所述目标展示页面中显示所述目标图片；

在所述比值大于或者等于所述预设阈值的情况下，确定在所述目标展示页面中显示所述目标图片的下一图片。

进一步的，所述在所述比值大于或者等于所述预设阈值的情况下，确定在所述目标展示页面中显示所述目标图片的下一图片，包括：

在所述比值大于或者等于所述预设阈值的情况下，确定滚动至所述Scroll View内的滚动图片在所述图片队列中的目标位置；

根据所述目标位置，确定在所述目标展示页面中显示所述目标图片的下一图片。

进一步的，所述根据所述目标位置，确定在所述目标展示页面中显示所述目标图片的下一图片，包括：