Vue下拉刷新組件

Examples

examples

Installation

 npm install vue-pull-to --save npm install vue-pull-to --save

Use Setup

<template> <div> <pull-to :top-load-method="refresh"> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </pull-to> </div> </template> <script>  import PullTo from 'vue-pull-to'   export default {  name: 'example',  components: {  PullTo  },  methods: {  refresh(loaded) {  setTimeout(() => {  this.dataList.reverse();  loaded('done');  }, 2000);  }  }  } </script>

組件會默認佔據父元素的百分之百高度。props top-load-method和bottom-load-method會默認傳進一個loaded參數，該參數是一個改變組件加載狀態的函數，必須調用一次loaded否則組件就會一直處於加載狀態，若是執行loaded('done')組件內部狀態就會變成成功加載的狀態，loaded('fail')爲失敗。

更多使用示例請參考Examples的代碼

API Docs

props

屬性	說明	類型	默認值
distance-index	滑動的閥值（值越大滑動的速度越慢）	Number	2
top-block-height	頂部在滾動容器外的塊級元素區域高度	Number	50
bottom-block-height	底部在滾動容器外的塊級元素區域高度	Number	50
top-load-method	頂部下拉時執行的方法	Function
bottom-load-method	底部上拉時執行的方法	Function
is-throttle	是否截流top-pull和bottom-pull自定義事件的觸發以保證性能	Boolean	true
top-config	滾動容器頂部信息的一些配置	Object	默認配置
bottom-config	滾動容器底部信息的一些配置	Object	默認配置

topConfig和bottomConfig可配置的選項和默認配置項的值

const TOP_DEFAULT_CONFIG = { pullText: '下拉刷新', // 下拉時顯示的文字 triggerText: '釋放更新', // 下拉到觸發距離時顯示的文字 loadingText: '加載中...', // 加載中的文字 doneText: '加載完成', // 加載完成的文字 failText: '加載失敗', // 加載失敗的文字 loadedStayTime: 400, // 加載完後停留的時間ms stayDistance: 50, // 觸發刷新後停留的距離 triggerDistance: 70 // 下拉刷新觸發的距離 } const BOTTOM_DEFAULT_CONFIG = { pullText: '上拉加載', triggerText: '釋放更新', loadingText: '加載中...', doneText: '加載完成', failText: '加載失敗', loadedStayTime: 400, stayDistance: 50, triggerDistance: 70 }

slots

名稱	說明	scope
default	默認slot滾動容器的內容
top-block	滾動容器外頂部的內容（支持做用域slot需用template標籤加上scope屬性）	state：當前的狀態、state-text：狀態對應的文本
bottom-block	滾動容器外底部的內容（支持做用域slot需用template標籤加上scope屬性）	state：當前的狀態、state-text：狀態對應的文本

events

事件名	說明
top-state-change	頂部狀態發生了改變時觸發，第一個參數爲當前的狀態
bottom-state-change	底部狀態發生了改變時觸發，第一個參數爲當前的狀態
top-pull	下拉時觸發，第一個參數爲當前拉動的距離值，默認會被截流，可配置props isThrottle來實時觸發
bottom-pull	上拉時觸發，第一個參數爲當前拉動的距離值，默認會被截流，可配置props isThrottle來實時觸發
infinite-scroll	當滾動容器滾動到底部時觸發