mescroll.js+vue.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>下拉刷新上啦加载</title>
<link rel="stylesheet" href="./mescroll.css">
<style type="text/css">
[v-cloak] {
display: none;
}
.top{
width: 100%;
height: 45px;
border-bottom: 1px solid #fbf5f5;
line-height: 45px;
font-size: 14px;
color: red;
font-weight: bold;
font-family: "微软雅黑";
text-align: center;
}
.list{
list-style: none;
width: 100%;
height: 95px;
margin: 10px auto;
border-bottom: 1px solid #fdf7f7;
display: flex;
overflow: hidden;
}
.list .item1{
width: 150px;
height: 80px;
}
.list .item1 img{
width: 100%;
height: 100%;
border-radius: 12px;
margin: 8px 0px;
}
.list .item2{
margin-left: 10px;
flex: 1;
font-size: 14px;
color: #666;
line-height: 19px;
}
</style>
</head>
<body>
<div class="top">
<p>下拉刷新上啦加载</p>
</div>
<!--滑动区域-->
<div id="mescroll" class="mescroll">
<!--展示上拉加载的数据列表-->
<div id="dataList" class="data-list" v-cloak>
<!-- <div style="position: fixed;bottom: 0px;" id='a'>
{{now}}{{floow}}
</div> -->
<div v-for="item in pdlist" class="list">
<div class="item item1">
<img :src="item.cover" alt="">
</div>
<div class="item item2">
<p>{{item.title}}</p>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//创建vue对象
var vm = new Vue({
el: "#dataList",
data: {
mescroll: null,
pdlist: [],
now:"1",
floow:'1'
},
mounted: function() {
var self = this;
self.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
up: {
callback: self.upCallback, //上拉回调
toTop:{ //配置回到顶部按钮
src : "./img/top.png", //默认滚动到1000px显示,可配置offset修改
//html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src
//offset : 1000
lazyLoad: {
use: true // 是否开启懒加载,默认false
}
},
}
});
},
methods: {
//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback: function(page) {
//联网加载数据
var self = this;
getListDataFromNet(page.num, page.size, function(curPageData) {
if(page.num == 1) self.pdlist = [];
//更新列表数据
self.pdlist = self.pdlist.concat(curPageData);
self.mescroll.endSuccess(curPageData.length);
}, function() {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
self.mescroll.endErr();
});
},
},
});
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
setTimeout(function () {
var that =this;
axios.get("http://web.source.91yunshi.com/content?type=3&sort=desc_ctime", {
params: {
pageNo: pageNum, //页码
pageSize: pageSize //每页长度
}
})
.then(function(response) {
var data=response.data.data;
//这里便于看到当前滚动到第几页
//<!-- <div style="position: fixed;bottom: 0px;" id='a'>
// {{now}}{{floow}}
// </div> -->
//将这段注释的代码打开即可看到效果
//document.getElementById('a').innerHTML =pageNum +"/"+ response.data.page.countPage
successCallback&&successCallback(data);//成功回调
})
.catch(function(error) {
errorCallback&&errorCallback()//失败回调
});
},500)
}
</script>
</html>
