CN106599008A - 基于瀑布流方式加载展示商品列表的方法、装置及客户端 - Google Patents

Abstract

本发明提供一种基于瀑布流方式加载展示商品列表的方法、装置及客户端，该方法包括：客户端在展示商品信息时，检测是否接收到商品信息页面移动的指令；若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息；其中，所述待展示的商品信息为商品信息所属的网站服务器中除所述商品信息所在页面之外的其他页面的商品信息。该方法能兼容PC端Web应用和移动端Web应用，提高用户体验。

Description

基于瀑布流方式加载展示商品列表的方法、装置及客户端

技术领域

本发明涉及互联网络技术领域，尤其涉及一种基于瀑布流方式加载展示商品列表的方法、装置及客户端。

背景技术

目前，移动端应用发展迅速，移动应用使用的用户规模也大大增加，已有超过个人计算机(personal computer，简称PC)端互联网web应用的发展趋势，国内各大电商都已开发自己的移动端应用程序(Application，简称APP)或是移动端Web App，而在商品列表展示模块，PC端大多采用的分页加载显示的传统方式，而如果在移动端也依旧采用这种传统方式，用户体验效果将大打折扣。

因此为了提高用户体验，以及考虑到要兼容PC端Web应用和移动端的Web应用，我们采用一种使用滚动条拖动加载商品列表的方式来解决此问题，本发明基于Javascript脚本响应鼠标拖动事件以及移动端滑动手势以瀑布流方式加载商品数据；

鉴于此，如何提供一种加载展示商品列表的方法、装置及客户端，以兼容PC端Web应用和移动端的Web应用，提高用户体验成为目前需要解决的技术问题。

发明内容

为解决上述的技术问题，本发明提供一种基于瀑布流方式加载展示商品列表的方法、装置及客户端，能够兼容PC端Web应用和移动端的Web应用，提高用户体验。

第一方面，本发明提供一种基于瀑布流方式加载展示商品列表的方法，包括：

客户端在展示商品信息时，检测是否接收到商品信息页面移动的指令；

若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息；

其中，所述待展示的商品信息为商品信息所属的网站服务器中除所述商品信息所在页面之外的其他页面的商品信息。

可选地，所述客户端以瀑布流方式展示已加载的待展示的商品信息。

可选地，所述客户端利用瀑布流插件，以瀑布流方式展示已加载的待展示的商品信息。

可选地，在客户端展示商品信息之前，还包括：

客户端向网站服务器发送商品信息查找指令，接收所述网站服务器返回的所查找商品信息的所有页面，并将所查找商品信息的所有页面存储在承载商品信息的div容器中，并展示所述div容器中存储的所查找商品信息的第一页面的商品信息；

相应地，

若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息，具体为

若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载所述div容器中存储的待展示的商品信息。

可选地，在所述客户端向网站服务器发送商品信息查找指令之后，还包括：

若客户端没有接收到所述网站服务器返回的所查找商品信息的所有页面，则展示无商品可加载的提示信息。

可选地，所述方法，还包括：

若客户端展示的商品信息已经展示到所述商品信息的最后一页，则展示已加载到最后一页的提示信息。

可选地，所述客户端利用上下左右滑动插件，检测是否接收到商品信息页面移动的指令。

可选地，所述客户端为PC端或移动端中的客户端。

第二方面，本发明提供一种基于瀑布流方式加载展示商品列表的装置，包括：

检测模块，用于客户端在展示商品信息时，检测是否接收到商品信息页面移动的指令；

加载模块，用于若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息；

其中，所述待展示的商品信息为商品信息所属的网站服务器中除所述商品信息所在页面之外的其他页面的商品信息。

第三方面，本发明提供一种客户端，包括：上述基于瀑布流方式加载展示商品列表的装置。

由上述技术方案可知，本发明的基于瀑布流方式加载展示商品列表的方法、装置及客户端，基于Javascript脚本以及jQuery库，兼容PC端Web应用和移动端的Web应用，监听用户在浏览器的滚动事件或是移动端的滚动事件和滑动手势事件，从而实现无需手动点击分页页码加载商品的瀑布流加载的方案，能够提高用户体验。

附图说明

图1为本发明一实施例提供的一种基于瀑布流方式加载展示商品列表的方法的流程示意图；

图2为本发明一实施例提供的一种基于瀑布流方式加载展示商品列表的装置的结构示意图；

图3为本发明一实施例提供的一种客户端的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他的实施例，都属于本发明保护的范围。

图1示出了本发明一实施例提供的基于瀑布流方式加载展示商品列表的方法的流程示意图，如图1所示，本实施例的基于瀑布流方式加载展示商品列表的方法如下所述。

101、客户端在展示商品信息时，检测是否接收到商品信息页面移动的指令。

在具体应用中，本实施例所述客户端可利用上下左右滑动插件，检测是否接收到商品信息页面移动的指令。

在具体应用中，本实施例中的上下左右滑动插件可优选为jquery.swipe.js插件，但本实施例并不对其进行限制，本实施例还可以使用其他上下左右滑动插件。

应说明的是，本实施例所述客户端为PC端或移动端中的客户端，PC端中的客户端可在监听到用户滚动鼠标滚轮(即监听到用户在PC端的滚动事件)时，接收到商品信息页面移动的指令；

或者，移动端中的客户端可在监听到用户在移动端屏幕上向上向下滑动或监听到移动端的滚动事件时，接收到商品信息页面移动的指令。

102、若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息。

其中，所述待展示的商品信息为商品信息所属的网站服务器中除所述商品信息所在页面之外的其他页面的商品信息。

在具体应用中，本实施例所述客户端以瀑布流方式展示已加载的待展示的商品信息。

进一步地，本实施例所述客户端可利用瀑布流插件，以瀑布流方式展示已加载的待展示的商品信息。

在具体应用中，本实施例中的瀑布流插件可优选为jquery.waterfall.js插件，但本实施例并不对其进行限制，本实施例还可以使用其他瀑布流插件。

在具体应用中，在客户端展示商品信息之前，本实施例所述方法还可包括：

客户端向网站服务器发送商品信息查找指令，接收所述网站服务器返回的所查找商品信息的所有页面，并将所查找商品信息的所有页面存储在承载商品信息的div容器中，并展示所述div容器中存储的所查找商品信息的第一页面的商品信息；

相应地，

若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息，具体为：

若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载所述div容器中存储的待展示的商品信息。

本实施例的基于瀑布流方式加载展示商品列表的方法，针对传统的电商网站以分页加载商品列表的不足，基于Javascript脚本以及jQuery库，兼容PC端Web应用和移动端的Web应用，监听用户在浏览器的滚动事件或是移动端的滚动事件和滑动手势事件，从而实现无需手动点击分页页码加载商品的瀑布流加载的方案，能够提高用户体验。

进一步地，在所述客户端向网站服务器发送商品信息查找指令之后，还可包括：

若客户端没有接收到所述网站服务器返回的所查找商品信息的所有页面，则展示无商品可加载的提示信息。

在具体应用中，本实施例所述方法，还可包括：

若客户端展示的商品信息已经展示到所述商品信息的最后一页，则展示已加载到最后一页的提示信息。

具体地，以jquery.waterfall.js和jquery.swipe.js插件举例来说，本实施例的基于瀑布流方式加载展示商品列表的方法，可包括：

S1、客户端向网站服务器发送商品信息查找指令，以使所述网站服务器根据所述查找指令，利用预先编写的获取商品信息接口，获取所查找商品信息的所有页面，并按照预设报文结构将所查找商品信息的所有页面返回给所述客户端。

其中，所述预设报文结构为{"success":true或false，"message":"成功"，data:[]}。

S2、客户端创建承载商品信息的div容器，并引入jquery插件中的上下左右滑动插件jquery.swipe.js和瀑布流插件jquery.waterfall.js；

S3、创建javascript function函数，调用jquery.waterfall.js中实现的瀑布流waterfall方法以及调用jquery.waterfall.js，设置jquery.waterfall.js中的请求数据的统一资源定位符url为所述网站服务器中预先编写的获取商品信息接口，设置所述jquery.waterfall.js中的滚动或滑动一次的分页参数pageIndex和pageSize(pageIndex表示当前为第几页，所述pageSize表示每页显示多少条数据)，设置jquery的回调函数callback。

S4、客户端接收所述网站服务器返回的所查找商品信息的所有页面，并以jQuery系统应用程序编程接口(Application ProgrammingInterface，简称API)或javascript原生API将所查找商品信息的所有页面存储在承载商品信息的div容器中，并利用瀑布流插件jquery.waterfall.js，以瀑布流方式展示所述div容器中存储的所查找商品信息的第一页面的商品信息；

S5、客户端在以瀑布流方式展示商品信息时，利用上下左右滑动插件jquery.swipe.js，检测是否接收到商品信息页面移动的指令。

S6、若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息(即，所述客户端利用瀑布流插件jquery.waterfall.js，以瀑布流方式展示已加载的商品信息)。

其中，所述待展示的商品信息为商品信息所属的网站服务器中除所述商品信息所在页面之外的其他页面的商品信息。

在具体应用中，本实施例所述客户端在加载所述div容器中的待展示的商品信息的过程中，展示正在加载的加载loading效果。

进一步地，为了更清楚的说明本实施例，下述为jquery.waterfall.js插件的代码：

进一步地，为了更清楚的说明本实施例，下述为jquery.swipe.js插件的代码：

(function(b){var a＝b.fn.swipe；b.fn.swipe＝function(d){varc＝{left:b.noop,right:b.noop,up:b.noop,down:b.noop}；if(b.type(d)＝＝"string"){switch(d.toLowerCase()){case"left":if(this.data("opt").left&&b.isFunction(this.data("opt").left)){this.data("opt").left.call(this)}break；case"right":if(this.data("opt").right&&b.isFunction(this.data("opt").right)){this.data("opt").right.call(this)}break；case"up":if(this.data("opt").up&&b.isFunction(this.data("opt").up)){this.data("opt").up.call(this)}break；case"down":if(this.data("opt").down&&b.isFunction(this.data("opt").down)){this.data("opt").down.call(this)}break；default:break}returnthis}else{if(b.isPlainObject(d)){vare＝{}；b.each(d,function(g,f){e[g.toLowerCase()]＝f})；b.extend(c,e)；returnthis.each(function(g,h){var f＝120；b(h).data("opt",b.extend({},c)).on("touchstartmousedown",function(m){varo＝m.type＝＝"touchstart"？m.originalEvent.touches[0]:m,l＝o.pageX,k＝o.pageY,j＝b(this).position().left,n＝b(this).position().top,i＝{left:j,top:n},q＝l-j,p＝k-n；b(document).on("touchmove.swipe.foundermousemove.swipe.founder",function(s){varr＝s.type＝＝"touchmove"？s.originalEvent.touches[0]:s；if(c.left！＝b.noop||c.right！＝b.noop){b(h).css("left",r.pageX-q-b(h).offsetParent().offset().left+"px")}if(c.up！＝b.noop||c.down！＝b.noop){b(h).css("top",r.pageY-p-b(h).offsetParent().offset().top+"px")}s.preventDefault()})；b(document).on("touchend.swipe.founder mouseup.swipe.founder",function(w){varu＝w.type＝＝"touchend"？w.originalEvent.changedTouches[0]:w,t＝u.pageX,s＝u.pageY,r＝Math.abs(t-l),z＝Math.abs(s-k),v＝null；v＝r>＝z？(t<l？(Math.abs(t-l)>f？"left":null):(Math.abs(t-l)>f？"right":null)):(s<k？(Math.abs(s-k)>f？"up":null):(Math.abs(s-k)>f？"down":null))；switch(v){case"left":if(c.left&&b.isFunction(c.left)){c.left.call(h)}break；case"right":if(c.right&&b.isFunction(c.right)){c.right.call(h)}break；case"up":if(c.up&&b.isFunction(c.up)){c.up.call(h)}break；case"down":if(c.down&&b.isFunction(c.down)){c.down.call(h)}break；default:b(h).animate({left:i.left+"px",top:i.top+"px"})；break}b(document).off(".swipe.founder")})})})}else{throw newError("％E5％8F％82％E6％95％B0％E9％94％99％E8％AF％AF！")}}}；b.fn.swipe.noConflict＝function(){b.fn.swipe＝a；return this}})(jQuery)；

本实施例的基于瀑布流方式加载展示商品列表的方法，针对传统的电商网站以分页加载商品列表的不足，基于Javascript脚本以及jQuery库，兼容PC端Web应用和移动端的Web应用，监听用户在浏览器的滚动事件或是移动端的滚动事件和滑动手势事件，从而实现无需手动点击分页页码加载商品的瀑布流加载的方案，能够提高用户体验。

图2示出了本发明一实施例提供的一种基于瀑布流方式加载展示商品列表的装置的结构示意图，如图2所示，本实施例的基于瀑布流方式加载展示商品列表的装置，包括：检测模块21和加载模块22；

检测模块21，用于客户端在展示商品信息时，检测是否接收到商品信息页面移动的指令；

加载模块22，用于若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息；

其中，所述待展示的商品信息为商品信息所属的网站服务器中除所述商品信息所在页面之外的其他页面的商品信息。

本实施例的基于瀑布流方式加载展示商品列表的装置，针对传统的电商网站以分页加载商品列表的不足，基于Javascript脚本以及jQuery库，兼容PC端Web应用和移动端的Web应用，监听用户在浏览器的滚动事件或是移动端的滚动事件和滑动手势事件，从而实现无需手动点击分页页码加载商品的瀑布流加载的方案，能够提高用户体验。

本实施例的基于瀑布流方式加载展示商品列表的装置，可以用于执行前述图1所示方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。

图3为本发明一实施例提供的一种客户端的结构示意图，如图3所示，本实施例的客户端，包括：图2所示实施例所述的基于瀑布流方式加载展示商品列表的装置。

本实施例的客户端，针对传统的电商网站以分页加载商品列表的不足，基于Javascript脚本以及jQuery库，兼容PC端Web应用和移动端的Web应用，监听用户在浏览器的滚动事件或是移动端的滚动事件和滑动手势事件，从而实现无需手动点击分页页码加载商品的瀑布流加载的方案，能够提高用户体验。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (10)

1.一种基于瀑布流方式加载展示商品列表的方法，其特征在于，包括：

客户端在展示商品信息时，检测是否接收到商品信息页面移动的指令；

若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息；

其中，所述待展示的商品信息为商品信息所属的网站服务器中除所述商品信息所在页面之外的其他页面的商品信息。

2.根据权利要求1所述的方法，其特征在于，所述客户端以瀑布流方式展示已加载的待展示的商品信息。

3.根据权利要求2所述的方法，其特征在于，所述客户端利用瀑布流插件，以瀑布流方式展示已加载的待展示的商品信息。

4.根据权利要求1所述的方法，其特征在于，在客户端展示商品信息之前，还包括：

客户端向网站服务器发送商品信息查找指令，接收所述网站服务器返回的所查找商品信息的所有页面，并将所查找商品信息的所有页面存储在承载商品信息的div容器中，并展示所述div容器中存储的所查找商品信息的第一页面的商品信息；

相应地，

若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息，具体为

若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载所述div容器中存储的待展示的商品信息。

5.根据权利要求4所述的方法，其特征在于，在所述客户端向网站服务器发送商品信息查找指令之后，还包括：

若客户端没有接收到所述网站服务器返回的所查找商品信息的所有页面，则展示无商品可加载的提示信息。

6.根据权利要求1所述的方法，其特征在于，还包括：

若客户端展示的商品信息已经展示到所述商品信息的最后一页，则展示已加载到最后一页的提示信息。

7.根据权利要求1所述的方法，其特征在于，所述客户端利用上下左右滑动插件，检测是否接收到商品信息页面移动的指令。

8.根据权利要求1所述的方法，其特征在于，所述客户端为PC端或移动端中的客户端。

9.一种基于瀑布流方式加载展示商品列表的装置，其特征在于，包括：

检测模块，用于客户端在展示商品信息时，检测是否接收到商品信息页面移动的指令；

加载模块，用于若客户端接收到所述指令，则根据所述指令在商品信息所属的页面内同时加载待展示的商品信息；

其中，所述待展示的商品信息为商品信息所属的网站服务器中除所述商品信息所在页面之外的其他页面的商品信息。

10.一种客户端，其特征在于，包括：权利要求9所述的基于瀑布流方式加载展示商品列表的装置。