【技术实现步骤摘要】
搜索结果页的展示方法、装置、电子设备及存储介质
本申请涉及互联网
,具体涉及页面展示
,尤其涉及搜索结果页的展示方法、装置、电子设备及存储介质。
技术介绍
目前的搜索结果页中,头部通栏一般由客户端代码(即NA)实现,而搜索结果内容主要为超文本5.0(html5,简称H5)承载,即NA+H5结合的模式。在NA+H5模式下,由于NA与H5是独立的,因此,在相关技术中,针对该模式下的头部通栏主要采用的是默认样式,例如白色样式,难以采用沉浸式通栏解决方案,难以营造“代入感”,降低了用户在搜索结果页上的停留时长,降低了搜索结果页的显示效率。
技术实现思路
提供了一种搜索结果页的展示方法、装置、电子设备及存储介质。根据第一方面,提供了一种搜索结果页的展示方法,通过向服务端发送搜索请求,并根据服务端返回的请求响应信息中的素材信息对通栏进行渲染并展示。由此,实现了沉浸式通栏效果,可提高用户在搜索结果页上的停留时长,同时提高了搜索结果页的显示效率。本申请第二方面提出了一种搜索结果页的展示装置。本申请第三方面提出了一种电子设备。本申请第四方面提出了一种存储有计算机指令的非瞬时计算机可读存储介质。本申请第一方面实施例提出了一种搜索结果页的展示方法,包括:向服务端发送搜索请求,所述搜索请求包括:搜索关键词;接收请求响应信息,所述请求响应信息包括:与所述搜索关键词对应的待显示的搜索结果内容,以及与所述搜索结果内容匹配的素材信息;根据所述素材信息,对所述通栏进行渲染 ...
【技术保护点】
1.一种搜索结果页的展示方法,包括:/n向服务端发送搜索请求,所述搜索请求包括:搜索关键词;/n接收请求响应信息,所述请求响应信息包括:与所述搜索关键词对应的待显示的搜索结果内容,以及与所述搜索结果内容匹配的素材信息;/n根据所述素材信息,对存储的通栏进行渲染,得到渲染后的通栏;/n对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示。/n
【技术特征摘要】
1.一种搜索结果页的展示方法,包括:
向服务端发送搜索请求,所述搜索请求包括:搜索关键词;
接收请求响应信息,所述请求响应信息包括:与所述搜索关键词对应的待显示的搜索结果内容,以及与所述搜索结果内容匹配的素材信息;
根据所述素材信息,对存储的通栏进行渲染,得到渲染后的通栏;
对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示。
2.根据权利要求1所述的方法,其中,所述素材信息包括:样式类型以及对应的样式参数信息,其中,样式类型为以下类型中的任意一种:纯色样式、渐变样式和图片样式。
3.根据权利要求2所述的方法,其中,所述纯色样式对应的样式参数信息包括:颜色信息;
所述根据所述素材信息,对存储的通栏进行渲染,得到渲染后的通栏,包括:
在所述素材信息中的样式类型为纯色样式时,根据所述素材信息中的颜色信息,确定所述通栏中各个像素的背景颜色;
根据所述通栏中各个像素的背景颜色对所述通栏进行渲染,得到渲染后的通栏。
4.根据权利要求3所述的方法,其中,在所述素材信息中的样式类型为纯色样式时,所述素材信息中的颜色信息,根据所述搜索结果内容中占比最大的颜色信息确定。
5.根据权利要求2所述的方法,其中,所述搜索请求还包括:客户端的通栏相关信息;
在所述素材信息中的样式类型为渐变样式或图片样式时,所述待显示的搜索结果内容为结合所述素材信息和所述通栏相关信息对所述搜索关键词对应的搜索结果内容进行渲染后得到的内容;
所述结合所述素材信息对存储的通栏进行渲染,得到渲染后的通栏,包括:
在所述素材信息中的样式类型为渐变样式或图片样式时,结合所述素材信息和所述通栏相关信息对所述通栏进行渲染,得到渲染后的通栏。
6.根据权利要求5所述的方法,其中,所述通栏相关信息包括:所述客户端的屏幕宽度和通栏高度;
所述渐变样式对应的样式参数信息包括:搜索结果内容渐变高度、渐变方向、起始渐变颜色和终止渐变颜色;
在所述素材信息中的样式类型为渐变样式时,所述结合所述素材信息和所述通栏相关信息对所述通栏进行渲染,得到渲染后的通栏,包括:
结合所述客户端的屏幕宽度、所述通栏高度、所述搜索结果内容渐变高度、所述渐变方向、所述起始渐变颜色和所述终止渐变颜色,确定所述通栏中各个像素的背景颜色;
根据所述通栏中各个像素的背景颜色对所述通栏进行渲染,得到渲染后的通栏。
7.根据权利要求5所述的方法,其中,所述通栏相关信息包括:所述客户端的屏幕宽度和通栏高度;
所述图片样式对应的样式参数信息包括:图片标识;
在所述素材信息中的样式类型为图片样式时,所述结合所述素材信息和所述通栏相关信息对所述通栏进行渲染,得到渲染后的通栏,包括:
结合所述客户端的屏幕宽度、所述通栏高度、所述图片标识对应的图片,确定所述通栏中各个像素的背景颜色;
根据所述通栏中各个像素的背景颜色对所述通栏进行渲染,得到渲染后的通栏。
8.根据权利要求1所述的方法,其中,所述对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示之后,还包括:
获取对所述搜索结果页的上滑请求,所述上滑请求包括:上滑滑动距离;
在所述上滑滑动距离大于等于第一距离阈值时,按照所述上滑滑动距离对所述搜索结果页中的搜索结果内容执行上滑操作,并展示从所述渲染后的通栏至所述存储的通栏的切换动画。
9.根据权利要求8所述的方法,其中,所述展示从渲染后的通栏至所述存储的通栏的切换动画之后,还包括:
获取对所述搜索结果页的下滑指令,所述下滑指令包括:下滑滑动距离;
在所述下滑滑动距离大于等于第二距离阈值时,按照所述下滑滑动距离对所述搜索结果页中的搜索结果内容执行下滑操作,并展示从所述存储的通栏至渲染后的通栏的切换动画。
10.根据权利要求1所述的方法,其中,所述对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示之后,还包括:
获取对所述搜索结果页的下拉指令,所述下拉指令包括:下拉距离;
按照所述下拉距离对所述搜索结果页中的搜索结果内容执行下拉操作,并确定下拉搜索结果内容后产生的空白区域;
确定待填充的颜色信息;
按照所述待填充的颜色信息对所述空白区域进行填充处理。
11.根据权利要求10所述的方法,其中,所述按照所述待填充的颜色信息对所述空白区域进行填充处理之后,还包括:
在获取到对所述搜索结果页的停止下拉指令时,展示所述搜索结果页。
12.根据权利要求10所述的方法,其中,在所述素材信息中的样式类型为纯色样式时,所述待填充的颜色信息根据所述搜索结果内容的颜色信息确定;
在所述素材信息中的样式类型为图片样式时,所述待填充的颜色信息根据所述素材信息中图片标识对应的图片确定;
在所述素材信息中的样式类型为渐变样式时,所述待填充的颜色信息根据所述素材信息中的起始渐变颜色和终止渐变颜色确定。
13.根据权利要求1所述的方法,其中,所述对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示之后,还包括:
根据页面切换请求,展示切换后页面;
获取对所述切换后页面的回退请求,所述回退请求包括:回退滑动距离;
根据所述回退滑动距离、所述切换后页面以及所述搜索结果页,生成当前待展示的第一页面,所述待展示的第一页面包括所述搜索结果页的第一区域;
根据所述回退滑动距离对所述第一区域中通栏的颜色信息进行调整。
14.根据权利要求13所述的方法,其中,所述根据所述回退滑动距离对所述第一区域中通栏的颜色信息进行调整之后,还包括:
获取对所述切换后页面的停止回退指令;
在获取到停止回退指令时的回退滑动距离大于等于第三距离阈值时,展示所述搜索结果页;
在获取到停止回退指令时的回退滑动距离小于第三距离阈值时,展示所述切换后页面。
15.根据权利要求14所述的方法,其中,在获取到停止回退请求时的回退滑动距离大于等于第三距离阈值时,展示所述搜索结果页之后,还包括:
获取对所述搜索结果页的前进请求,所述前进请求包括:前进滑动距离;
根据所述前进滑动距离、所述切换后页面以及所述搜索结果页,生成当前待展示的第二页面,所述待展示的第二页面包括所述搜索结果页的第二区域;
根据所述前进滑动距离对所述第二区域中通栏的颜色信息进行调整。
16.根据权利要求15所述的方法,其中,所述根据所述前进滑动距离对所述第二区域中通栏的颜色信息进行调整之后,还包括:
获取对所述搜索结果页的停止前进指令;
在获取到所述停止前进指令时的前进滑动距离大于等于第四距离阈值时,展示所述切换后页面;
在获取到所述停止前进指令时的前进滑动距离小于第四距离阈值时,展示所述搜索结果页。
<...
【专利技术属性】
技术研发人员:刘俊启,庄颖,徐梓茹,陈雪姣,胡杰,徐修楼,李环宇,谷铁峰,侯世杰,刘悦,路蕾,
申请(专利权)人:北京百度网讯科技有限公司,
类型:发明
国别省市:北京;11
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。