最近再用vue开发一款App，用到了mescroll上拉刷新滚动加载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"
>
<
link
rel=
"stylesheet"
href=
"../../dist/mescroll.min.css"
>
<
style
type=
"text/css"
>
* {
margin:
0;
padding:
0;
-webkit-touch-callout:
none;
-webkit-user-select:
none;
-webkit-tap-highlight-color:
transparent;
}
body{
background-color:
white}
ul{
list-style-type:
none}
a {
text-decoration:
none;
color:
#18B4FE;}
/*vue*/
[
v-cloak
] {
display:
none;
}
/*模拟的标题*/
.header{
z-index:
9990;
position:
fixed;
top:
0;
left:
0;
width:
100%;
height:
44px;
line-height:
44px;
text-align:
center;
border-bottom:
1px
solid
#eee;
background-color:
white;
}
.header .btn-left{
position:
absolute;
top:
0;
left:
0;
padding:
12px;
line-height:
22px;
}
/*mescroll滚动的区域*/
.mescroll{
position:
fixed;
top:
44px;
bottom:
0;
height:
auto;
}
/*展示上拉加载的数据列表*/
.data-list li{
position:
relative;
padding:
10px
8px
10px
120px;
border-bottom:
1px
solid
#eee;
}
.data-list .pd-img{
position:
absolute;
left:
18px;
top:
18px;
width:
80px;
height:
80px;
}
.data-list .pd-name{
font-size:
16px;
line-height:
20px;
height:
40px;
overflow:
hidden;
}
.data-list .pd-price{
margin-top:
8px;
color:
red;
}
.data-list .pd-sold{
font-size:
12px;
margin-top:
8px;
color:
gray;
}
<
/
style
>
</
head
>
<
body
>
<!--模拟的标题-->
<
p
class=
"header"
><
a
class=
"btn-left"
href=
"../index.html"
>main
</
a
> 示例: 在vue中使用mescroll
</
p
>
<!--滑动区域-->
<
div
id=
"mescroll"
class=
"mescroll"
>
<!--展示上拉加载的数据列表-->
<
ul
id=
"dataList"
class=
"data-list"
v-cloak
>
<
li
v-for=
"pd in pdlist"
>
<
img
class=
"pd-img" :
src=
"pd.pdImg"
/>
<
p
class=
"pd-name"
>{{pd.pdName}}
</
p
>
<
p
class=
"pd-price"
>{{pd.pdPrice}} 元
</
p
>
<
p
class=
"pd-sold"
>已售{{pd.pdSold}}件
</
p
>
</
li
>
</
ul
>
</
div
>
</
body
>
<
script
src=
"../../dist/mescroll.min.js"
type=
"text/javascript"
charset=
"utf-8"
>
<
/
script
>
<
script
src=
"../res/vue.min.js"
type=
"text/javascript"
charset=
"utf-8"
>
<
/
script
>
<!--模拟的数据-->
<
script
src=
"../res/pdlist1.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: []
},
mounted
:
function() {
//创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
//解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
var
self =
this;
self.
mescroll =
new
MeScroll(
"mescroll", {
//请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
up: {
callback:
self.
upCallback,
//上拉回调
//以下参数可删除,不配置
isBounce:
false,
//此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
//page:{size:8}, //可配置每页8条数据,默认10
toTop:{
//配置回到顶部按钮
src :
"../res/img/mescroll-totop.png",
//默认滚动到1000px显示,可配置offset修改
//html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src
//offset : 1000
},
empty:{
//配置列表无任何数据的提示
warpId:
"dataList",
icon :
"../res/img/mescroll-empty.png" ,
// tip : "亲,暂无相关数据哦~" ,
// btntext : "去逛逛 >" ,
// btnClick : function() {
// alert("点击了去逛逛按钮");
// }
},
//vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空
//vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空
// clearId: "dataList",
// clearEmptyId: "dataList"
}
});
},
methods: {
//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback
:
function(
page) {
alert(
'上拉')
//联网加载数据
var
self =
this;
getListDataFromNet(
page.
num,
page.
size,
function(
curPageData) {
//curPageData=[]; //打开本行注释,可演示列表无任何数据empty的配置
//如果是第一页需手动制空列表 (代替clearId和clearEmptyId的配置)
if(
page.
num ==
1)
self.
pdlist = [];
//更新列表数据
self.
pdlist =
self.
pdlist.
concat(
curPageData);
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
console.
log(
"page.num="+
page.
num+
", page.size="+
page.
size+
", curPageData.length="+
curPageData.
length+
", self.pdlist.length==" +
self.
pdlist.
length);
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
//self.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
//self.mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
//self.mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
self.
mescroll.
endSuccess(
curPageData.
length);
},
function() {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
self.
mescroll.
endErr();
});
},
},
});
/*联网加载列表数据
请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
实际项目以您服务器接口返回的数据为准,无需本地处理分页.
* */
function
getListDataFromNet(
pageNum,
pageSize,
successCallback,
errorCallback) {
//延时一秒,模拟联网
setTimeout(
function () {
// axios.get("xxxxxx", {
// params: {
// num: pageNum, //页码
// size: pageSize //每页长度
// }
// })
// .then(function(response) {
var
data=
pdlist1;
// 模拟数据: ../res/pdlist1.js
var
listData=[];
//模拟分页数据
for (
var
i = (
pageNum-
1)*
pageSize;
i <
pageNum*
pageSize;
i++) {
if(
i==
data.
length)
break;
listData.
push(
data[
i]);
}
successCallback&&
successCallback(
listData);
//成功回调
// })
// .catch(function(error) {
// errorCallback&&errorCallback()//失败回调
// });
},
500)
}
<
/
script
>
</
html
>
官网提供的vue demo github地址 一开始直接引用官网例子并没有什么效果，后来在git中找到了解决办法
import "../../../../static/mescroll.m";
需要在mescroll文件的末尾加上window.Mescroll = Mescroll
下面就是将官网vue例子转化成vue代码
<template> <div id="mescroll" class="mescroll"> <!–展示上拉加载的数据列表–> <ul id="dataList" class="data-list" v-cloak> <li v-for="pd in pdlist"> <img class="pd-img" :src="pd.pdImg"/> <p class="pd-name">{{pd.order.couponNum}}</p> <p class="pd-price">{{pd.pdPrice}} 元</p> <p class="pd-sold">已售{{pd.pdSold}}件</p> </li> </ul> </div> </template> <script> import "../../../../static/mescroll.m"; export default { data() { return { mescroll: null, pdlist: [], userId: JSON.parse(sessionStorage.getItem("user")).id, role: JSON.parse(sessionStorage.getItem("user")).roleList[0].roleName, token: JSON.parse(sessionStorage.getItem("LoginToken")).LoginToken, orderHis: [], } }, mounted() { this.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到 up: { callback: this.upCallback, //上拉回调 //以下参数可删除,不配置 isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10 //page:{size:8}, //可配置每页8条数据,默认10 toTop: { //配置回到顶部按钮 src: "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改 //html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src //offset : 1000 }, empty: { //配置列表无任何数据的提示 warpId: "dataList", icon: "../res/img/mescroll-empty.png", // tip : "亲,暂无相关数据哦~" , // btntext : "去逛逛 >" , // btnClick : function() { // alert("点击了去逛逛按钮"); // } }, //vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空 //vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空 // clearId: "dataList", // clearEmptyId: "dataList" } }); }, methods: { upCallback(page) { // alert('上拉') //联网加载数据 // var this = this; this.getListDataFromNet(page.num, page.size, (curPageData) => { console.log('curPageData', curPageData) //curPageData=[]; //打开本行注释,可演示列表无任何数据empty的配置 // //如果是第一页需手动制空列表 (代替clearId和clearEmptyId的配置) if (page.num == 1) this.pdlist = []; //更新列表数据 this.pdlist = this.pdlist.concat(curPageData.list); // //联网成功的回调,隐藏下拉刷新和上拉加载的状态; // //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据; // console.log("page.num=" + page.num + ", page.size=" + page.size + ", curPageData.length=" + curPageData.length + ", this.pdlist.length==" + this.pdlist.length); // // //方法一(推荐): 后台接口有返回列表的总页数 totalPage // //this.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数) // // //方法二(推荐): 后台接口有返回列表的总数据量 totalSize // //this.mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量) // // //方法三(推荐): 您有其他方式知道是否有下一页 hasNext // //this.mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false) // // //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据. // this.mescroll.endSuccess(curPageData.length); this.mescroll.endSuccess(curPageData.list.length, curPageData.hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false) }, () => { //联网失败的回调,隐藏下拉刷新和上拉加载的状态; this.mescroll.endErr(); }); }, getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) { //延时一秒,模拟联网 setTimeout(() => { this.$axios({ method: "get", params: { access_token: this.token, orderStatusList: [2], loginId: this.userId, pageSize: pageSize, pageNum: pageNum }, url: "/order/queryPageOrderAndDtl" }).then((res) => { this.orderHis = res.data.resultList[0] console.log(this.orderHis) successCallback && successCallback(this.orderHis);//成功回调 }, (err) => { }) }, 500) } } } </script> <style> @import "../../../../static/mescroll.min.css"; * { margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } body { background-color: white } ul { list-style-type: none } a { text-decoration: none; color: #18B4FE; } /*vue*/ [v-cloak] { display: none; } /*模拟的标题*/ .header { z-index: 9990; position: fixed; top: 0; left: 0; width: 100%; height: 44px; line-height: 44px; text-align: center; border-bottom: 1px solid #eee; background-color: white; } .header .btn-left { position: absolute; top: 0; left: 0; padding: 12px; line-height: 22px; } /*mescroll滚动的区域*/ .mescroll { position: fixed; top: 96px; bottom: 0px; height: auto; } /*展示上拉加载的数据列表*/ .data-list li { position: relative; padding: 10px 8px 10px 120px; border-bottom: 1px solid #eee; } .data-list .pd-img { position: absolute; left: 18px; top: 18px; width: 80px; height: 80px; } .data-list .pd-name { font-size: 16px; line-height: 20px; height: 40px; overflow: hidden; } .data-list .pd-price { margin-top: 8px; color: red; } .data-list .pd-sold { font-size: 12px; margin-top: 8px; color: gray; } </style>
<template> <div id="mescroll" class="mescroll"> <!–展示上拉加载的数据列表–> <ul id="dataList" class="data-list" v-cloak> <li v-for="pd in pdlist"> <img class="pd-img" :src="pd.pdImg"/> <p class="pd-name">{{pd.order.couponNum}}</p> <p class="pd-price">{{pd.pdPrice}} 元</p> <p class="pd-sold">已售{{pd.pdSold}}件</p> </li> </ul> </div> </template>
如果app中多次使用id应该设置不同的值，初始化Mescroll的时候也需做相应的改变，如果页面牵涉到删除某一项重新加载数据时需要调用提供的destroy方法然后重新初始化。
扫一扫
1985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
