一种轮播图片显示方法以及轮播图片显示装置制造方法及图纸

技术编号:25707815 阅读:28 留言:0更新日期:2020-09-23 02:54
本申请提供一种轮播图片显示方法以及轮播图片显示装置,该方法包括:通过Scroll View的on Scroll End Drag函数监听用户对终端的屏幕上的目标展示页面中显示的目标图片的滑动操作;响应于监听到的滑动操作,获取目标图片的偏移坐标;根据偏移坐标,确定在目标展示页面中显示目标图片或者目标图片的下一图片。这样,可以通过Scroll View的on Scroll End Drag函数监听用户对终端的屏幕上的目标展示页面中显示的目标图片的滑动操作。然后,响应于监听到的滑动操作,可以获取目标图片的偏移坐标。接下来,可以根据偏移坐标,确定在目标展示页面中显示目标图片或者目标图片的下一图片。避免出现切换页面和切换轮播图片相互影响的情况。

【技术实现步骤摘要】
一种轮播图片显示方法以及轮播图片显示装置
本申请涉及通信
,尤其涉及一种轮播图片显示方法以及轮播图片显示装置。
技术介绍
ReactNative是Facebook开发的开源跨平台移动应用开发框架,其使用JavaScript这种编码语言。react-native-tab-view是基于ReactNative的TabView组件。可以在react-native-tab-view中显示多个页面,当用户使用手指在终端的屏幕上左右滑动时,可以实现切换显示不同页面的内容。现有技术中,在页面内显示轮播图片时,用户可以使用手指在屏幕上对应显示轮播图片的区域进行左右滑动。由于页面的切换和轮播图片的切换均是基于用户的手势实现的,因此当用户在屏幕上对应显示轮播图片的区域进行操作时,会出现无法判断出应该切换页面还是应该切换轮播图片的情况。
技术实现思路
本申请提供了一种轮播图片显示方法以及轮播图片显示装置,以解决现有技术中,在页面内显示轮播图片,当用户在屏幕上对应显示轮播图片的区域进行操作时,会出现无法判断出应该切换页面还是应本文档来自技高网...

【技术保护点】
1.一种轮播图片显示方法,其特征在于,包括:/n通过Scroll View的on ScrollEnd Drag函数监听用户对终端的屏幕上的目标展示页面中显示的目标图片的滑动操作,其中,所述目标展示页面为react-native-tab-view所显示的目标应用程序的多个展示页面中的一个展示页面;/n响应于监听到的所述滑动操作,获取所述目标图片的偏移坐标;/n根据所述偏移坐标,确定在所述目标展示页面中显示所述目标图片或者所述目标图片的下一图片,其中,所述目标图片为多张轮播图片中的一张轮播图片,图片队列包含位于起始位置的第一参考图片、位于末端位置的第二参考图片以及位于所述起始位置和所述末端位置之间...

【技术特征摘要】
1.一种轮播图片显示方法,其特征在于,包括:
通过ScrollView的onScrollEndDrag函数监听用户对终端的屏幕上的目标展示页面中显示的目标图片的滑动操作,其中,所述目标展示页面为react-native-tab-view所显示的目标应用程序的多个展示页面中的一个展示页面;
响应于监听到的所述滑动操作,获取所述目标图片的偏移坐标;
根据所述偏移坐标,确定在所述目标展示页面中显示所述目标图片或者所述目标图片的下一图片,其中,所述目标图片为多张轮播图片中的一张轮播图片,图片队列包含位于起始位置的第一参考图片、位于末端位置的第二参考图片以及位于所述起始位置和所述末端位置之间,依次排列的所述多张轮播图片,所述目标图片的下一图片为所述多张轮播图片中,与所述目标图片相邻序列的图片。


2.如权利要求1所述的方法,其特征在于,所述根据所述偏移坐标,确定在所述目标展示页面中显示所述目标图片或者所述目标图片的下一图片,包括:
计算所述偏移坐标与所述目标图片的目标宽度的比值;
在所述比值小于预设阈值的情况下,确定在所述目标展示页面中显示所述目标图片;
在所述比值大于或者等于所述预设阈值的情况下,确定在所述目标展示页面中显示所述目标图片的下一图片。


3.如权利要求2所述的方法,其特征在于,所述在所述比值大于或者等于所述预设阈值的情况下,确定在所述目标展示页面中显示所述目标图片的下一图片,包括:
在所述比值大于或者等于所述预设阈值的情况下,确定滚动至所述ScrollView内的滚动图片在所述图片队列中的目标位置;
根据所述目标位置,确定在所述目标展示页面中显示所述目标图片的下一图片。


4.如权利要求3所述的方法,其特征在于,所述根据所述目标位置,确定在所述目标展示页面中显示所述目标图片的下一图片,包括:
在所述目标位置为所述图片队列中除所述起始位置和所述末端位置之外的其他位置的情况下,确定所述滚动图片为所述目标图片的下一图片;
显示所述目标图片的下一图片。


5.如权利要求3所述的方法,其特征在于,所述根据所述目标位置,确定在所述目标展示页面中显示所述目标图片的下一图片,包括:
在所述目标位置为所述图片队列中的起始位置的情况下,确定位于所述图片队列的倒数第二个位置的轮播图片为所述目标图片的下一图片;
显示所述目标图片的下一图片。


6.如权利要求3所述的方法,其特征在于,所述根据所述目标位置,确定在所述目标展示页面中显示所述目标图片的下一图片,包括:
在所述目标位置为所述图片队列中的末端位置的情况下,确定位于所述图片队列的第二个位置的轮播图片为所述目标图片的下一图片;
显示所述目标图片的下一图片。


7.一种轮播图片显示装置,其特征在于,包括:
监听模块,用于通过ScrollView的onScrollEndDrag函数监听用户对终端的屏幕上的目标展示页面中显示的目标图片...

【专利技术属性】
技术研发人员:赵荣荣
申请(专利权)人:北京城市网邻信息技术有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1