vue-drapload
Version:
one vue plug for resolve pull-to-refresh and load more data
92 lines (85 loc) • 2.59 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>vue 测试例子</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=1"/>
<meta name="renderer" content="webkit"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="format-detection" content="telephone=no">
<link type="text/css" rel="stylesheet" href="css/css.css">
<style>
</style>
</head>
<body>
<div class="app" v-drapload drapload-key="ascroll" drapload-initialize="true" drapload-down="down()" drapload-up="up()">
<div>
<div class="item" v-for="item in a" @click="click(item)">
<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>
<script src="js/jquery.js"></script>
<script src="http://rap.taobao.org/rap.plugin.js?projectId=4039"></script>
<script src="js/vue.js"></script>
<script src="../src/index.js"></script>
<script>
var app = new Vue({
el: 'body',
data: function () {
return { a: [], b: [] }
},
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) {
// 初始化数据 先获取所有数据并初始化前６条
// Initialize the data,get 0-6 data of the array.
fn(data.sections.packages)
}
});
},
methods: {
down: function () {
var me = this
//当滚动条距离底部高度等于你在drapload-foot设置的高度时将运行一次此函数
//if scrollTop = drapload-foot , function run.
me.$options.loadListData(function (data) {
me.a = me.a.concat(data)
me.ascroll.resetload()
});
},
up: function () {
var me = this
//当滚动条距离底部高度等于你在drapload-top设置的高度时将运行一次此函数
//if scrollTop = drapload-top , function run.
me.$options.loadListData(function (data) {
me.a = data
me.ascroll.resetload()
});
}
}
})
</script>
</body>
</html>