2. 程式人生 > >Vue2.0 實戰 之 上啦載入下拉重新整理

Vue2.0 實戰 之 上啦載入下拉重新整理

阿新 • • 發佈：2019-02-20
export default { props: { offset: { type: Number, default: 100 //預設高度 }, enableInfinite: { type: Boolean, default: true }, enableRefresh: { type: Boolean
, default: true }, dataList: { default: false, required: false }, onRefresh: { type: Function, default: undefined, required: false }, onInfinite: { type: Function
, default: undefined, require: false } }, data() { return { top: 0, state: 0, startX: 0, startY: 0, touching: false, infiniteLoading: false
, downFlag: false, //用來顯示是否載入中 } }, methods: { touchStart(e) { this.startY = e.targetTouches[0].pageY; this.startX = e.targetTouches[0].pageX; this.startScroll = this.$el.scrollTop || 0; this.touching = true; //留著有用，不能刪除 this.dataList.noFlag = false; this.$el.querySelector('.load-more').style.display = 'block'; }, touchMove(e) { if(!this.enableRefresh || this.dataList.noFlag || !this.touching) { return } let diff = e.targetTouches[0].pageY - this.startY - this.startScroll if(diff > 0) e.preventDefault() this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0) if(this.state === 2) { // in refreshing return } if(this.top >= this.offset) { this.state = 1 } else { this.state = 0 } let more = this.$el.querySelector('.load-more'); if(!this.top && this.state === 0) { more.style.display = 'block'; } else { more.style.display = 'none'; } }, touchEnd(e) { if(!this.enableRefresh) { return } this.touching = false if(this.state === 2) { // in refreshing this.state = 2 this.top = this.offset return } if(this.top >= this.offset) { // do refresh this.refresh() } else { // cancel refresh this.state = 0 this.top = 0 } //用於判斷滑動是否在原地 ----begin let endX = e.changedTouches[0].pageX, endY = e.changedTouches[0].pageY, dy = this.startY - endY, dx = endX - this.startX; //如果滑動距離太短 if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { console.log("滑動距離太短") return; } //--------end-------- if(!this.enableInfinite || this.infiniteLoading) { return } let outerHeight = this.$el.clientHeight, innerHeight = this.$el.querySelector('.inner').clientHeight, scrollTop = this.$el.scrollTop, ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0, bottom = innerHeight - outerHeight - scrollTop - ptrHeight; console.log(bottom + " __ " + this.offset) if(bottom <= this.offset && this.state === 0) { this.downFlag = true; this.infinite(); } else { this.$el.querySelector('.load-more').style.display = 'none'; this.downFlag = false; } }, refresh() { this.state = 2; this.top = this.offset; setTimeout(() => { this.onRefresh(this.refreshDone) }, 1000); }, refreshDone() { this.state = 0 this.top = 0 }, infinite() { this.infiniteLoading = true setTimeout(() => { this.onInfinite(this.infiniteDone); }, 2000); }, infiniteDone() { this.infiniteLoading = false } } }

相關推薦

Vue2.0 實戰 之 上啦載入下拉重新整理

export default { props: { offset: { type: Number, default: 100 //預設高度 }, e

SwipeToLoadLayout之倒包加上啦載入下拉重新整理demo

package com.wentong.administrator.swipetoloaddemo.activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android

Material Design 實戰 之第五彈 —— 下拉重新整理（SwipeRefreshLayout）

本模組共有六篇文章，參考郭神的《第一行程式碼》，對Material Design的學習做一個詳細的筆記，大家可以一起交流一下： Material Design 實戰 之第一彈——Toolbar（即本文） Material Design 實戰 之第二彈——滑動選

WebApp-mui列表頁上拉載入下拉重新整理 跳轉詳情頁

列表頁 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=de

XrecyclerView上拉載入下拉重新整理+RXjava+retrofit+fresco+MVP

依賴： //XrecyclerView：          compile 'com.jcodecraeer:xrecyclerview:1.5.9' //RXjava依賴：     implement

小程式上拉載入下拉重新整理

小程式上拉載入下拉重新整理 在小程式api裡設定 onPullDownRefresh 下拉重新整理 onReachBottom 上拉觸低 想要使用這兩個方法還要在json檔案裡配置 “onReachBottomDistance”:true, 開啟上拉 “enablePullDownR

側滑+多條目+上拉載入+下拉重新整理+無線輪播

APP package com.example.week_02_02; import android.app.Application; import com.nostra13.universalimageloader.core.DisplayImageOptions; import

XListView上拉載入下拉重新整理，第一個條目展示Banner輪播圖

佈局開始 此處只有xlistview的佈局 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://sch

側拉+TabLayout切換fragment+Viewpager輪播圖小圓點和圖片上顯示標題+多條目+上拉載入+下拉重新整理

1.MainActivity主頁面 package com.example.zonghelianxi01; import android.annotation.SuppressLint; import android.support.annotation.Nullable; impor

側滑+多條目+上拉載入+下拉重新整理+無限輪播+網路判斷

1.MainActivity頁面 package com.example.week2_02; import android.content.DialogInterface; import android.content.Intent; import android.support.v4

基類抽取http服務(網路判斷)資料庫多條目載入上拉載入下拉重新整理

//BaseActivity public abstract class BaseActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) {

側拉選單+上拉載入下拉重新整理 顯示詳細資訊

//側拉布局 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/and

簡單基類抽取+http服務+上拉載入下拉重新整理

//BaseActivity public abstract class BaseActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) {

mint-UI上拉載入下拉重新整理和fastclick衝突問題解決

當我們的Vue專案為了解決IOS裝置事件點選卡頓，300ms的延遲的問題，引入了fastclick後，會有很多小的衝突，例如在使用mint-UI實現上拉載入和下拉重新整理的時候，經常會觸碰到點選事件進入下一個頁面，這是因為去掉300毫秒的延遲就會使得頁面特別靈敏，想著用阻止冒泡的方式來解決。 在

上拉載入下拉重新整理瞭解下

老樣子，我們先，哦不，今天我們直接上思路，沒有效果圖，真的沒有 我們依舊從介面及邏輯兩塊進行分析 1.介面上，只分成簡單的兩塊，一塊是上方的重新整理文字，一塊是下方的內容，然後將上方提示內容隱藏在螢幕之外，一般由兩種方式，一種是上面遮一層，另一種是marg

XListiew顯示上拉載入,下拉重新整理

activity_main <com.bwie.xlistview.XListView android:id="@+id/xlv" android:layout_width="match_parent" andro

Android自定義上拉載入下拉重新整理PullToRefreshListView

　　轉自http://blog.csdn.net/allen315410/article/details/39965327 　　最近專案中要用到重新整理和載入的功能，網上查了有好多關於重新整理和載入的例子，挑了一個比較好的，有些地方更完善了些。例如下拉不完全時沒有做處理，還有載入後滑動有些

基於better-scroll封裝一個上拉載入下拉重新整理元件

<template> <div class="scroll" ref="wrapper"> <!-- 資料列表 --> <div class="list-wrapper"> <slot name="content"&g

上拉載入 下拉重新整理

首先 vc.h 中 @property(nonatomic , assign)int Page;// 當前頁 vc.m @property(nonatomic , strong)NSMutableArray *dataSource; viewDidLoad 中:

推薦一個非常好用的上拉載入下拉重新整理的框架SmartRreshLayout

SmartRefreshLayout 很好用的載入框架 github 地址：https://github.com/scwang90/SmartRefreshLayout 功能非常全面，可以自定義載入頁面，也可以是使用他給你做的幾個非常炫酷的載入佈局 可以設定自動下拉載入，也可以設定