プルダウンリフレッシュ、ラジャは（基本的に）基本モデルにアップロード

序文

今すぐオンラインドロップダウンリフレッシュ、ラジャは、検索の多くをプラグアップロードし、本番環境で使用したい場合は、あなたが直接、オンライン検索を飛ぶことができる、私がしたすべては、このプラグインの任意のプラグインステップバイステップ、に依存しませんでしたそれを書き込むプロセスは、あなたがプラグインを書かれていない、これに基づいて学生をカスタマイズすることができ、あなたは、次のプラグインを作成プロセス全体で、エントリレベルの位置を特定する方法を学ぶことができます、あなたが読むことができませんか？Baiduはいくつかの時間のために実際には、直接十分に差し込むので、今のプラグインを作成する方法を検討します。騒ぎ、レンダリング
画像のキャプション

原則

リフレッシュは、ロードプロセスを特定のdiv、div要素を追加し、プルダウンの原則であるdiv要素の高さがダウンした距離に応じて、ドロップダウンテキストが読み込ま表示するために変更し、ドロップダウン距離を手放すためによると、要求されたデータかどうかを決定します

ビルドプロセス

いくつかは、デフォルトの設定項目を定義します

var defaults = {
    threshold: 100,   // 滑动触发下拉刷新的距离
    stop: 40,         // 下拉刷新时停留的位置距离屏幕顶部的距离
    dis: 20           // 距离屏幕底端触发 上拉加载 的距离
}

定義のコンストラクタ

function JrRefresh (el, options) {
    this.options = Object.assign({}, defaults, options)  // 合并参数
    this.el = typeof el === 'string' ? document.querySelector(el) : el  // 定义要操作对象
    this.progress = null       // 下拉刷新显示的 dom
    this.loadMore = null       // 上拉加载显示的 dom
    this.progressHeight = 0    // 下拉刷新的 dom 的高度
    this.rotate = null         // 下拉刷新 转圈 的角度
    this.touchstartY = 0       // 触摸到屏幕的坐标起始 Y 值
    this.currentY = 0          // 移动时实时记录的坐标 Y 值
    this.isAnimation = false   // 是否在自动回滚
    this.isRefresh = false     // 是否正在刷新数据
    this.isLoadMore = false    // 是否正在加载数据
    this.hasMore = true        // 是否有更多数据, 下拉加载会用
    this.rotateTimer = null    // 控制 下拉刷新 转圈 的时间计时器
    this.event()
    this.init()
}

初期化には、いくつかの要素は、DOMを使用する必要が追加します

JrRefresh.prototype.init = function () {
    // 增加下拉刷新的显示
    var refreshHtml = `<div class="jrscroll-downwarp jrscroll-downwarp-reset" style="height: 0px;"><div class="downwarp-content"><p class="downwarp-progress" style="transform: rotate(0deg);"></p ><p class="downwarp-tip">下拉刷新</p ></div></div>`
    var divm = document.createElement('div')
    divm.innerHTML = refreshHtml
    this.progress = divm.children[0]
    this.el.prepend(this.progress)
    // 增加上拉加载的显示
    var loadMoreHtml = `<div class="jrscroll-upwarp" style="visibility: hidden;"><p class="upwarp-progress"></p><p class="upwarp-tip">加载中...</p></div>`
    var div = document.createElement('div')
    div.innerHTML = loadMoreHtml
    this.loadMore = div.children[0]
    this.el.appendChild(this.loadMore)
}

this.elにより、ない場合ならば、それは、ここでは、ここでJrRefresh.prototype.pullDown、JrRefresh.prototype.touchend、これはコンストラクタのJrRefreshにバインドされている他の機能を使用したバインドプルダウン機能を説明し、イベントの定義呼び出し、これはthis.el.を指します（あなたはすべてを知っているふり？）これは使用プラグインを作成するために、これを結合する1つの方法であります

JrRefresh.prototype.event = function () {
    this.el.addEventListener('touchstart', this.handleTouchStart.bind(this))
    this.el.addEventListener('touchmove', this.pullDown.bind(this))
    this.el.addEventListener('touchend', this.touchend.bind(this))
    window.addEventListener('scroll', this.handleScroll.bind(this))
}

Yは上にスライドするように、指タッチ記録された値を座標またはダウン決定されます

JrRefresh.prototype.handleTouchStart = function (e) {
    // 记录手指触摸屏幕的 Y 值坐标
    this.touchstartY = e.changedTouches[0].clientY
}

this.touchstartY> 0は、指が滑り落ち記載され、そこe.preventDefault（）がないようにするためである - 指が滑り、プルダウントリガ・イベントを開始すると、リアルタイムthis.currentY Y座標値、this.currentYを場合によって記録します具体this.moveDown DOMドロップダウンリフレッシュディスプレイ（this.progress）高さによって制御される、そのような内蔵プルダウンリフレッシュとしてブラウザドロップダウン、またはトリガUCブラウザがIOSときデフォルトブラックマイクロチャネル上部に表示され、空白を表示さ

JrRefresh.prototype.pullDown = function (e) {
    var scrollTop = document.documentElement.scrollTop ||
                    window.pageYOffset ||
                    document.body.scrollTop
    this.currentY = e.targetTouches[0].clientY
    if (this.currentY - this.touchstartY >= 0 && scrollTop <= 0) {
        e.preventDefault()
        if (!this.isAnimation && !this.isRefresh) {
            this.moveDown(this.currentY - this.touchstartY)
        }
    }
}

moveDown機能は、専用表示内容this.progressためサークルchangeProgressState制御機能の回転角度を制御するrotateProgress特殊機能、this.progressの高さを制御するために特に使用され

JrRefresh.prototype.moveDown = function (dis) {
    if (dis < this.options.threshold) {
        this.progress.style.height = this.progressHeight + dis + 'px'
        this.rotateProgress(dis*2)
        this.changeProgressState('下拉刷新')
    } else {
        // 当滑动距离超过 threshold 时，放慢下拉速度
        var aftDis = this.options.threshold + (dis - this.options.threshold) / 3
        var aftAngle = this.options.threshold * 2 + (dis - this.options.threshold) / 1.7
        this.progress.style.height = this.progressHeight + aftDis + 'px'
        this.rotateProgress(aftAngle)
        this.changeProgressState('释放刷新')
    }
}

サークルのみ2例、指の動きで1、距離を旋回の速度よりも遅く、1は、独自のノンストップのターンで、前者の場合、指が回転角比で抜け出し、必ずしも私の文言ではなく、メイン一つのことは、より遅い円の回転角度が急に変化していない場合に回っているが、これは、このプラグインの難しさの一つであり、学生はより多くのハを見たいと思って理解していません

JrRefresh.prototype.rotateProgress = function (rotate) {
    var rotateDom = this.progress.querySelector('.downwarp-progress')
    if (rotate != undefined) {
        rotateDom.style.transform = 'rotate(' + rotate + 'deg)'
        this.rotate = rotate
    } else {
        var t = 0;
        this.rotateTimer = setInterval(() => {
            t++
            var angle = (this.rotate + t*15) % 360
            rotateDom.style.transform = 'rotate(' + angle + 'deg)'
            rotateDom.style.WebkitTransform = 'rotate(' + angle + 'deg)'
        }, 16)
    }
}

changeProgressStateこの機能何も言うことはありません

JrRefresh.prototype.changeProgressState = function (name) {
    this.progress.querySelector('.downwarp-tip').innerHTML = name
}

これまでのところ、結果はここでは、少し道を下った論理的な指のリリースタイムです

JrRefresh.prototype.touchend = function () {
    var scrollTop = document.documentElement.scrollTop ||
                    window.pageYOffset ||
                    document.body.scrollTop
    if (scrollTop > 0 || this.isRefresh|| this.isAnimation) return     //只有 1.在屏幕顶部 2.已完成请求数据 3.不在回滚 三条都满足才进行处理
    if ((this.currentY - this.touchstartY) > this.options.threshold) {
        this.options.downCallback()  // 触发参数穿过来的请求数据
        this.isRefresh = true
        this.moveBack(this.options.stop)            // 下拉刷新时停留的位置距离屏幕顶部的距离

    } else  {
        this.moveBack()
    }

}

moveBack進捗に対応する位置に機能戻る専門

JrRefresh.prototype.moveBack = function (dis) {
    var dis = dis || 0;
    this.isAnimation = true   // 正在回退
    var currentHeight = this.progress.offsetHeight
    var t = 0,                        // 进行的步数
        b = 10,                       // 总步数
        c = (currentHeight - dis)/b   // 每一步的距离
    var timer = setInterval(() => {
        t++;
        this.progress.style.height = currentHeight - c * t + 'px'
        if (t == b) {
            if (dis === 0) {
                this.changeProgressState('下拉刷新')     
                this.progressHeight = 0
            } else {
                this.changeProgressState('正在刷新')
                this.progressHeight = this.options.stop
                this.rotateProgress()
            }
            this.touchstartY = ''
            this.isAnimation = false     // 回退完成
            clearInterval(timer) 
        }
    }, 16)
}

要求データが終了すると、元の位置に圧延される、パラメータは、データがないことを示すブール値であります

JrRefresh.prototype.endSuccess = function (bool) {
    if (this.isRefresh) {      //  如果是正在刷新数据
        this.changeProgressState('刷新成功')
        if (bool) {
            setTimeout(() => {     //延迟 500ms 回滚
                this.moveBack(0)
                this.isRefresh = false
                clearInterval(this.rotateTimer)
            },500)
        } else {
            this.toggleLoadingText(true)
        }
    }
    if (this.isLoadMore) {     //  如果是正在加载数据
        this.isLoadMore = false
        this.loadMore.style.visibility = 'hidden'
        this.toggleLoadingText(bool)
    }
}
JrRefresh.prototype.toggleLoadingText = function (hasMore) {
    if (hasMore) {
        this.loadMore.querySelector('.upwarp-tip').innerHTML = '加载中...'
        this.loadMore.querySelector('.upwarp-progress').style.display = 'inline-block'
    } else {
        this.loadMore.style.visibility = 'visible'
        this.loadMore.querySelector('.upwarp-tip').innerHTML = '没有更多数据了'
        this.loadMore.querySelector('.upwarp-progress').style.display = 'none'
    }
}

これまでのところ、ドロップダウンリフレッシュロジックがついに完成し、あなたがアップロードラジャを開始することができ、要求されたページの高さを超えるデータは、ページがまだレンダリングされていない私のアプローチがあるので、ページの高さは、許可することができる一方で、多くの問題は、ページの高さを取得することです高さは100msの遅延を取得します、

JrRefresh.prototype.handleScroll = function () {
    var top = this.loadMore.getBoundingClientRect().top;    // 获取最底部标签距离屏幕顶部的距离
    if (top + 10 < window.innerHeight && !this.isLoadMore && this.hasMore) {
        this.isLoadMore = true
        this.loadMore.style.visibility = 'visible'
        this.options.up.callback()
    }
}

使い方

<div class="jrscroll"> 
//列表内容,如:<ul>列表数据</ul> ..
</div>
<script>
    var scroll = new JrRefresh(scrollWrap, {
        downCallback: pullDownRefresh,
        upCallback: pullUpLoadMore
    })
    function pullDownRefresh() {
        setTimeout(() => {
            console.log('刷新成功')
            // 处理数据
            scroll.endSuccess(true)
        }, 1000)
    }
    function pullUpLoadMore() {
        setTimeout(() => {
            console.log('请求成功')
            // 处理数据
            scroll.endSuccess(true)
        }, 2000)
    
    }
</script>

まあ、大体ので、多くの学生は、ソースコード、会場見たいと思って紹介し、ここに、そして後続の更新はgithubの上の完璧な、興味のある学生やフォークああスターになります

序文

原則

ビルドプロセス

使い方

おすすめ