Vue练习—使用mescroll实现下拉刷新上拉加载的功能
前阵子写混合开发项目，需要下拉刷新和上拉加载。于是百度到了mescroll。这里以最简单的方式记录一下mescroll的基本使用。
准备数据源
为了方便这里我自备数据源，项目是SpringBoot项目工程，接口代码如下：
package com.lyan.web_note.modules.test_user.controller;
import com.baomidou.mybatisplus.plugins.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import com.lyan.web_note.modules.test_user.entity.TestUser;
import com.lyan.web_note.modules.test_user.service.ITestUserService;
import java.util.ArrayList;
import java.util.List;
/**
* 前端控制器
* @author Lyan
* @since 2018-09-12
*/
@RestController
@RequestMapping("/test_user/testUser")
@SuppressWarnings("SpringJavaAutowiredFieldsWarningInspection")
public class TestUserController {
@Autowired
private ITestUserService iTestUserService;
/**
* 添加测试数据
* @return
*/
@GetMapping("/addUsers")
@ResponseBody
public int add() {
int dataSize = 50;
List<TestUser> users = new ArrayList<>();
TestUser user;
for (int i = 0; i < dataSize; i++) {
user = new TestUser();
user.setAge(20);
user.setName("测试数据" + i);
users.add(user);
}
iTestUserService.insertBatch(users);
return 0;
}
/**
* 分页查询数据
* @param num
* @param size
* @return
*/
@GetMapping("/page/{pageNum}/{pageSize}")
@ResponseBody
public Page<TestUser> getUserList(@PathVariable("pageNum") int num, @PathVariable("pageSize") int size) {
Page<TestUser> page = new Page<>(num, size);
iTestUserService.selectPage(page);
return page;
}
}
示例部分
页面部分代码不多，下拉刷新和上拉加载用的都是默认的效果。这里特意是为了练习vue.js，所以使用的异步请求接口的方式，下面请把它看成普通的html就可以。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header('上拉刷新下拉加载')}">
</head>
<body>
<!-- 设置高度 -->
<div id="page" style="height: 100%">
<div class="mescroll" ref="mescroll">
<!-- 使用div再包一层 -->
<div>
<table class="table table-bordered">
<div th:insert="~{/common/tabelTitle.html::tableHeader}"></div>
<tbody>
<tr v-for="user,index in users">
<td class="text-center">{{index + 1}}</td>
<td class="text-center">{{user.name}}</td>
<td class="text-center">{{user.age}}</td>
<td class="text-center">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#page',
data: {
users: []
},
mounted: function () {
var self = this;
self.pageNum = 1;
self.pageSize = 20;
self.mescroll = new MeScroll(self.$refs.mescroll, {
down: {
auto: true,//自动加载
isBounce: false,
callback: self.downCallback
},
up: {
auto: false,
isBounce: false,
callback: self.upCallback
}
});
},
methods: {
/**
* 获取项目路径
*/
getRootPath: function () {
var pathName = window.document.location.pathname;
return pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
},
/**
* 获取数据源
*/
getData: function (isLoadMore) {
var self = this;
this.$http.get(self.getRootPath() + '/test_user/testUser/page/' + self.pageNum + '/' + self.pageSize).then(function (res) {
console.log(isLoadMore);
var resultArg = JSON.parse(res.bodyText).records;
if (isLoadMore) {
self.mescroll.endSuccess(self.users.length);
if (resultArg.length === 0) {
self.pageNum--;
self.mescroll.endErr();
return;
}
$.each(resultArg, function (index, item) {
self.users.push(item);
});
} else {
self.mescroll.endSuccess();
self.users = resultArg;
}
}
);
},
/**
* 下拉刷新
*/
downCallback: function () {
this.pageNum = 1;
this.getData(false);
},
/**
* 上拉加载
*/
upCallback: function () {
this.pageNum++;
console.log(this.pageNum);
this.getData(true);
}
}
});
</script>
</html>
界面中使用的thymeleaf片段代码如下：
- 1、引用的JS和CSS的传参片段（传参仅仅就是为了设置下title）：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header(titleName)">
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>[[${titleName}]]</title>
<link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}"/>
<link rel="stylesheet" href="../static/css/mescroll.css" th:href="@{/css/mescroll.css}" >
<script src="../static/js/jquery-1.12.4.min.js" th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script src="../static/js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
<script src="../static/js/vue.min.js" th:src="@{/js/vue.min.js}"></script>
<script src="../static/js/vue-resource.min.js" th:src="@{/js/vue-resource.min.js}"></script>
<script src="../static/js/mescroll.js" th:src="@{/js/mescroll.js}"></script>
</head>
</html>
- 2、引用table的表头片段（因为别处的练习也用到了，所以这里抽取了出来）：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}"/>
</head>
<body>
<div th:fragment="tableHeader">
<thead>
<tr>
<td class="text-center"><strong>序号</strong></td>
<td class="text-center"><strong>姓名</strong></td>
<td class="text-center"><strong>年龄</strong></td>
<td class="text-center"><strong>操作</strong></td>
</tr>
</thead>
</div>
</body>
</html>
运行效果
注意使用mescroll样式元素的父元素一定要设置固定的高度。
