vue-drapload
Version:
one vue plug for resolve pull-to-refresh and load more data
81 lines (77 loc) • 2.05 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()">
<div>
<a class="item" v-for="item in a" :href="item.url" >
<h1 class="name">{{item.name}}</h1>
<div class="desc">{{item.desc}}</div>
</a>
</div>
</div>
<script src="js/jquery.js"></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: []
}
},
loadListData: function (fn) {
fn([
{
name: "基础例子",
desc: "基础例子",
url: "base.html",
},
{
name: "自定义加载效果",
desc: "你可以使用自己的配置初始化下拉刷新效果，",
url: "config.html",
},
])
},
ready: function () {
var me = this;
me.$options.vue = me
},
/**
* 加载数据
* @param fn
*/
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.noData()
me.ascroll.resetload()
});
}
}
})
</script>
</body>
</html>