如何使用JavaScript实现拉动更新效果(Android刷新样式)

本文概述

• 安装插件
• 实现

刷新按钮触摸屏手势包括用手指触摸计算设备的屏幕或按下定点设备上的按钮, 用手指或定点设备向下拖动屏幕, 然后释放屏幕, 作为对设备的信号应用程序刷新(和执行其他操作)屏幕上的内容。

如果你使用Web技术和Cordova, Ionic或Phonegap等框架使用混合应用程序, 则该插件将非常方便。

安装插件

为了在我们的项目中创建拉动以更新效果, 我们将使用PulltoRefresh.js。 PulltoRefresh是一个小型但功能强大的Javascript库, 旨在增强你Web应用程序的”刷新”功能。它不需要标记, 可高度自定义且无依赖。

• 即插即用：只需安装就可以开始使用。
• 轻量级：仅8KB。
• 自由依赖：你将不需要庞大的框架来使其工作。

如果你需要有关该插件的更多信息, 请在此处访问官方的Github存储库。

现在开始, 在这里下载插件的副本。另一方面, 你可以使用凉亭：

bower install pulltorefreshjs

或NPM：

npm install pulltorefreshjs

现在, 使用脚本标签将该插件添加到你的HTML文档中：

<script src="node_modules/pulltorefreshjs/dist/pulltorefresh.js" type="text/javascript"></script>

你已经准备好在文档中使用PulltoRefresh.js。 Box Factura的家伙为你带来了此插件。

实现

尽管还有其他插件, 例如web-pull-to-refresh, PulltoRefresh.js是一个在许多浏览器上都经过了很好的工作和测试的插件, 并且非常易于使用。你不需要任何额外的标记即可使其工作, 因此, 这是几乎所有开发人员的主要选择。

要将拉动刷新效果添加到文档, 只需使用以下代码：

PullToRefresh.init({
    mainElement: 'body', onRefresh: function(){
        // What do you want to do when the user does the pull-to-refresh gesture
        window.location.reload(); 
    }
});

请注意, 你可以使用CSS选择器(＃element-id)更改main元素以在应用程序的特定元素中使用它。以下gif显示了我们的代码世界中PulltoRefresh.js的实现(尽管我们并没有真正使用它, 仅用于测试目的)：

你可以通过修改一些属性轻松地自定义插件：

PullToRefresh.init({
    mainElement: 'body', onRefresh: function(){
        // What do you want to do when the user does the pull-to-refresh gesture
    }, distThreshold : 50, // Minimum distance required to trigger the refresh.
    iconArrow: '<span class="fa fa-arrow-down"></span>', // The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh
    instructionsPullToRefresh: "Pull down to DESTROY THE WORLD", instructionsReleaseToRefresh: "Release to ENABLE BOMB"
});

请参阅API文档中的初始化中的所有可用属性。你可以在插件的首页或演示中查看实时示例。编码愉快！