ホームページ > ウェブフロントエンド > jsチュートリアル > Iscroll のプルダウンおよびプルアップ更新チュートリアルの実装

Iscroll のプルダウンおよびプルアップ更新チュートリアルの実装

零下一度
リリース: 2017-06-27 16:02:09
オリジナル
1732 人が閲覧しました

在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的内容,那么就等于修改了APP的内容展示,有更灵活的满足更新版本。

概述

但是有一点就是,如何让web实现的页面,看起来更像是原生的APP呢,首先要想办法解决的就是下拉刷新的功能,对于这个功能,我并没有在网络上找到很好的解决方法,并且,我个人对手机端的开发,经验还是有些欠缺,这里就不罗列使用js实现web页下拉刷新的功能了。

这里,我基于iscroll5的基础上,进行了少量的改动源代码,进而实现了下拉属性的功能,所以分享在这里,仅供参考。

关于iscroll插件

iscroll插件(官网地址)当前最新的版本是version 5版本,相对于版本4,我个人觉得,版本5变得更具有灵活性,虽然移除了一些特定的事件,特定的对外接口,但是对于使用该插件的程序员们,这个插件变得更具有操控性,这是我比较喜欢的一种插件类型,但同时,也发现了一些问题,事件中的touchend事件,不存在了(确切的说,不能说是不存在),只是被拦截了,所以一些基本的事件,都被进行了拦截,而导致无法监听到touchend事件,只能检测到scrollEnd事件,scrollEnd事件,是在页面滚动停止时,才会被触发的,所以~~

所以,根据版本5,无法检测到,是不是下拉了一段距离之后,松开时的动作了,对此,我也检查了源代码,也没有发现这个功能的实现方法,不得已,只能对源代码进行了少量的修改,所以就有了本篇文章。

修改后插件的使用

基本上,该方法并没有进行多少的修改,只是添加了两个事件的监听类型,一个叫做“slideDown”,表示下拉被触发,另一个叫做“slideUp”,表示上拉被触发。

其他,实例化中,各属性都没有进行更改,所以,关于iscroll的使用,直接参考官网的说明:iscroll官网。

这里,我只对新添加的事件,添加一个demo测试,这个demo是一个很简单的demo,也只是用来说明新添加事件的用法的,如果需要用到下拉刷新或者上拉刷新的朋友,可以根据本demo自行修改。





下拉刷新



  • Pretty row 1

  • Pretty row 2

  • Pretty row 3

  • Pretty row 4

  • Pretty row 5

  • ...
  • Pretty row 46

  • Pretty row 47

  • Pretty row 48

  • Pretty row 49

  • Pretty row 50





上拉刷新


ここでは CSS 部分については詳しく説明しません。興味がある場合は、Web ページを直接保存して、関連するコードを分離してください。iscroll.js と iscroll.css です。その他 Bootstrap と jQuery はどちらも私が怠惰なため追加したフレームワークです。

上記の構造をインスタンス化します:

var myScroll,
upIcon = $("#up-icon"),
downIcon = $("#down-icon");

myScroll = new IScroll('#wrapper', {プローブタイプ: 3, マウスホイール: true }); // このプラグインがスクロール イベントを監視できることを示す probeType 属性 myScroll.on("scroll", function(){ // スクロール イベントを使用してプルアップを制御できるそして、プルダウン後に表示されるモジュールでは、
//スタイルとコンテンツ表示の変更
var y = this.y,
maxY = this.maxScrollY - y,
downHasClass = downIcon.hasClass("reverse_icon"),
upHasClass = upIcon.hasClass("reverse_icon");
if(y >= 40){
!downHasClass && downIcon.addClass("reverse_icon");
}else if(y < 40 && y >) ; 0){
downHasClass && downIcon.removeClass("reverse_icon"); return "";
}
if(maxY >= 40){
!upHasClass && upIcon.addClass("reverse_icon"); }else if(maxY < 40 && maxY >=0){
upHasClass && upIcon.removeClass("reverse_icon"); return "";
}
});

myScroll.on("slideDown",function( ){ //プルダウンによって境界を超えた場合、指が画面から離れるとイベントがトリガーされます
if(this.y > 40){ //コンテンツとコンテンツ間の距離を取得しますscreen
//このセクションではスタイルを変更し、ajax またはその他の操作のみを使用できます
//現時点では、この機能を説明するためにアラート関数のみが追加されています
//また、アラートは後続のアニメーションをブロックするためです。 Effects, ,
//以前に追加したスタイルを削除するために次のコード行を追加しました
alert("slideDown");
upIcon.removeClass("reverse_icon");
}
});

myScroll.on(" slideUp ",function(){ if(this.maxScrollY - this.y > 40){ //slideDown と同様に、maxScrollY はドキュメント領域の最大の高さを表します
alert("slideUp");
upIcon.removeClass("reverse_icon ")
}
});

同時に、ajax を使用して新しい要素を追加または削除する場合は、myScroll.refresh() を再実行する必要があり、maxScrollY 領域が次のように再計算されることに注意してください。エリアカバレッジを確保してください。実際にこれらのものを使用すると、間違いなくこれらの問題に遭遇するでしょう。したがって、ここでは話しすぎています~~~

OK、この記事を書くときのコードは次のようになります。 Android デバイスを持っていないので、IOS8 デバイスのみをテストしました。問題がある場合は、ご指摘ください。ありがとうございます~~

以上がIscroll のプルダウンおよびプルアップ更新チュートリアルの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート