随着支付宝小程序越来越畅销,越来越多的开发者也已经开始转为支付宝小程序的研发,因此,对于如何同时实现支付宝小程序上拉读取和下拉创下等功能,可能将就是很多开发者须要介绍的部分。
在支付宝小程序中,上拉读取和下拉创下就是一种很常用的交互方式,也就是用户在下载内容时自然而然所期盼的体验。下面就要我们去看一看,如何同时实现支付宝小程序的上拉读取和下拉创下。
一、上拉读取
上拉读取就是所指在翻转至页面底部时,稳步向上带动,则可以引爆读取更多的数据的操作方式。这种交互方式给与用户更多的挑选,同时也能够增加页面重定向的次数。
同时实现上拉读取的关键在于,如何监听页面翻转事件,以及如何引爆读取更多数据的操作方式。
1.1 同时实现监听页面翻转事件
在支付宝小程序中,监听页面翻转事件可以通过onPageScroll这个api去同时实现。当页面翻转事件被引爆后,我们可以领到当前页面的翻转边线scrollTop。
下面就是一个直观的示例,在这个示例中,我们通过监听页面翻转事件,去实时监控页面翻转的边线。
在Page的生命周期中,重新加入如下代码:
onPageScroll: function(e) {
console.log(e.scrollTop)
通过以上代码,我们就可以监控页面的scrollTop值了。
1.2 同时实现上拉读取
晓得了页面翻转的scrollTop值,下一步就是同时实现上拉读取操作方式。同时实现上拉读取的原理就是,当页面翻转至底部时,稳步向上带动以及引爆一个读取更多数据的操作方式。因此,我们须要采用如下技巧:
1、在WXML中,减少一个视觉元素——读取更多标签
读取更多标签须要在页面底部,显著地提示信息用户可以上拉读取。可以就是一个相似“读取中”的文字,或是一个loading动画等等。
2、监听页面翻转事件,并且在距离底部一定的距离时,引爆读取更多操作方式
这里的关键在于,如何推论页面翻转至了页面底部,我们可以先以获取页面高度、滚动条高度和窗口高度等有关数据。如下:
//以获取页面高度
var pageHeight = this.getPageHeight()
// 以获取滚动条高度
var pageScrollTop = this.getPageScrollTop()
//以获取窗口高度
var windowHeight = this.getWindowHeight()
现在,我们已经以获取至了三个关键数据,接下来就是展开推论:如果页面翻转至底部了,那么稳步向上带动就可以引爆上拉事件。
通过比较页面高度,滚动条高度和窗口高度,可以获得以下代码:
if ((pageHeight - pageScrollTop - windowHeight) < 50) {
console.log('上拉事件被引爆')
在此处,我们定义50为推论页面翻转至底部的距离阈值。当上拉事件被引爆时,我们可以稳步发动下一次的数据命令。
二、下拉创下
下拉创下就是所指在页面翻转至顶部时,稳步向上带动,可以引爆一个创下数据的操作方式。这种交互方式可以协助用户快速更新数据,进一步提高用户体验。
同样的,为了同时实现下拉创下功能,我们须要监听页面翻转事件,并且引爆适当的操作方式。
2.1 同时实现监听页面翻转事件
我们可以采用相同的api,即onPageScroll在页面中同时实现监听页面翻转事件。
在Page的生命周期中,重新加入如下代码:
onPageScroll: function(e) {
console.log(e.scrollTop)
同样的,这里的代码可以在页面翻转时,实时输入当前页面的scrollTop值。
2.2 同时实现下拉创下
前述中我们表述至,下拉创下就是所指在翻转至页面顶部时,稳步向上带动,就可以引爆创下事件。引爆创下事件后,我们须要展开以下操作方式:
1、表明下拉创下的图形
在用户下拉页面的同时,我们须要在页面顶部表明一个“loading中”的文字或者图片,提示信息用户正在展开创下操作方式。
2、命令代莱数据
下拉创下的目的就是更新数据,因此当用户展开下拉操作方式后,我们须要发动代莱命令,以获取最新的数据。
3、暗藏下拉创下的图形
当代莱数据命令顺利完成后,我们须要把之前的“loading中”的提示符除去,以便用户看见最新的页面内容。
在支付宝小程序中,我们可以采用api: startPullDownRefresh和stopPullDownRefresh去同时实现这些步骤。
//表明下拉创下的状态
my.startPullDownRefresh({
complete: function () {
my.showToast({
title: '读取中...',
// 命令代莱数据,这里的具体操作根据实际业务场景而的定
//暗藏下拉创下的状态
my.stopPullDownRefresh()
在这个示例中,当用户展开下拉创下操作方式时,我们首先利用startPullDownRefresh去表明一个“读取中”的状态,同时发动数据命令。当命令顺利完成后,我们采用stopPullDownRefresh去暗藏下拉创下的状态,并且更新页面内容。
总结
上拉读取和下拉创下就是支付宝小程序中常用的交互方式,同时实现这些功能须要认知页面翻转事件的原理,以及如何采用api去同时实现具体内容的操作方式。通过以上代码示例,坚信开发者们已经能掌控同时实现上拉读取和下拉创下功能的技巧。持续的优化这些大细节能很大的提高用户的体验,也能迎合更多的用户至您的小程序中,使小程序赢得更大的顺利。