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樣式元素的父元素一定要設置固定的高度。
