使用mescroll实现下拉刷新上拉加载

Vue练习—使用mescroll实现下拉刷新上拉加载的功能

lyanjun

3497人浏览 · 2018-09-18 22:42:33

lyanjun · 2018-09-18 22:42:33 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^