vue-drapload
这是基于vue的一个下拉刷新和加载更多的插件。 使用手机打开。或者用chrome切换成手机模拟器查看效果。
安装//Install
npm install vue-drapload --save ###ES6
import vueDrapload from 'vue-drapload' Vue.use(vueDrapload,config)###CommonJS
var vueDrapload = require('vue-drapload'); Vue.use(vueDrapload,config)###直接引用//Direct include
<script src="../node_modules/vue_scroll/vue-drapload.js"></script>引入默认加载效果的css
.dropload-up { position: relative; height: 0; overflow: hidden; font-size: 12px; -webkit-transform: translateZ(0); transform: translateZ(0); } .dropload-refresh, .dropload-update, .dropload-load, .dropload-noData { height: 50px; line-height: 50px; text-align: center; } .dropload-load .loading { display: inline-block; height: 15px; width: 15px; border-radius: 100%; margin: 6px; border: 2px solid #666; border-bottom-color: transparent; vertical-align: middle; -webkit-animation: rotate 0.75s linear infinite; animation: rotate 0.75s linear infinite; } @-webkit-keyframes rotate { from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} }使用方法//Usage
Use v-scroll to enable the infinite scroll, and use drapload-* attributes to define its options.
使用v-scroll进行滚动翻页,使用 drapload- * 属性来定义它的选项。
<div class="app" v-drapload drapload-key="ascroll" drapload-initialize="true" drapload-down="down_a()" drapload-up="up_a()"> <div> <div class="item" v-for="item in a"> <h1 class="name">{{item.value}}</h1> <div class="desc">{{item.data.description}}</div> <div class="down">{{item.data.url}}</div> <div class="score">{{item.data.suggested_score}}</div> </div> </div> </div> var app = new Vue({ el: 'body', data: function () { return { a: [], b: [] } }, ready: function () { var me = this; me.$options.vue = me }, /** * 加载数据 * @param fn */ loadListData: function (fn) { var me = this.vue; $.ajax({ url: 'npm', data: {}, type: 'GET', success: function (data) { fn(data.sections.packages) } }); }, methods: { down_a: function () { var me = this me.$options.loadListData(function (data) { me.a = me.a.concat(data) // 通过设置的key 方法下拉对象方法 // 如果没有更多数据。你可以 调用 me.ascroll.noData() me.ascroll.resetload(true) }); }, up_a: function () { var me = this me.$options.loadListData(function (data) { me.a = data me.ascroll.resetload() }); } } })配置//Config
//现在使用默认配置。下拉刷新的各种状态会提供配置选项控制。参考 config.html 页面例子 var config = { domUp: { initialCall: function () {}, //初始化状态 pullingCall: function () {}, //下拉过程中 loadingCall: function () {},//加载中 loadEndCall: function () {}//加载完成 }, domDown: { initialCall: function () {},//初始化 loadingCall: function () {}, domNoData: function () {} } }选项//Options
| scroll/Option | Description |
|---|---|
| drapload-key | 标准变量：该scroll唯一标示．// Number(default = 'scroll')： 你可以在vm对象中找到他 |
| drapload-up | 下拉刷新的时候回调该方法，存在该属性才会支持下拉刷新。否则不支持下拉刷新 |
| drapload-down | 加载更多的时候调用该方法，存在该方法才会支持加载更多 |
| drapload-initialize | 布尔(默认为false)：设定为true时将在页面加载完成后触发一次drapload-down 对应的方法． |
方法//Function
| scroll/Option | Description |
|---|---|
| resetload | 重置下拉刷新或者加载跟多状态。一般当你加载到数据后会调用该方法 |
| noData | 当加载更多数据（drapload-down对应方法）的时候没有数据后可以调用该方法。这时加载跟多组件状态会改为无数据状态 |
| hasData | 当加载更多数据（drapload-down对应方法）的时候还存在数据后可以调用该方法。这时加载跟多组件状态会改为还能加载更多数据的状态 |
License
MIT
