码上快乐

相关内容   简体   繁体

vue实现pc端上拉加载功能，不兼容移动端

本文转载自  查看原文  2018-03-30 13:04  2906    vue/ 前端/ javascript

所用插件：Mock.js 这个只用到它简单的功能，拦截ajax请求。

　　　　　vue和axios，vue基础知识请看文档。

　　　　　axios类似于jquery的ajax方法。

以下是是该功能所有代码，其中mock的数据可以不必理会。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/mock.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        .article-title h3 {
            font-size: 28px;
            line-height: 40px;
            font-weight: 700;
            font-family: "Microsoft Yahei", "微软雅黑", "宋体";
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in message" class="article-title">
            <h3>{{item.title}}</h3>
            <div>
                <span>{{item.channel}}</span><i v-show="item.timer">{{item.timer}}</i>
            </div>
            {{item.content}}
        </li>
        <div v-show="!pullRefreshss" style="font-size: 24px">加载中...</div>
    </ul>
    <a href="./test.html" style="display: block;height: 30px;width: 100px;background: red"></a>
</div>
<script>
    Mock.mock('http://test.com?page=1', {
        artDetail: [{
            title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }]
    });
    Mock.mock('http://test.com?page=2', {
        artDetail: [{
            title: '2女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }]
    });
    Mock.mock('http://test.com?page=3', {
        artDetail: [{
            title: '3女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }]
    });
    Mock.mock('http://test.com?page=4', {
        artDetail: [{
            title: '4女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }]
    });
    Mock.mock('http://test.com?page=5', {
        artDetail: [{
            title: '5女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }]
    });
    Mock.mock('http://test.com?page=6', {
        artDetail: [{
            title: '6女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }]
    });
    Mock.mock('http://test.com?page=7', {
        artDetail: [{
            title: '7女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }]
    });
    var Data = {
        artDetail: [{
            title: 'ceshi悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '03-15',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }, {
            title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
            timer: '',
            channel: '搜狐新闻',
            content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
        }]
    }
    var app = new Vue({
        el: '#app',
        data: {
            message: Data.artDetail,
            pullRefreshss: true,
            page: 1,
            scollY: null,
            pageTotal: 7
        },
        methods: {
            //文档的总高度
            getScrollTop: function () {
                var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
                if (document.body) {
                    bodyScrollTop = document.body.scrollTop;
                }
                if (document.documentElement) {
                    documentScrollTop = document.documentElement.scrollTop;
                }
                scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
                return scrollTop;
            },
            //浏览器视口的高度
            getScrollHeight: function () {
                var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
                if (document.body) {
                    bodyScrollHeight = document.body.scrollHeight;
                }
                if (document.documentElement) {
                    documentScrollHeight = document.documentElement.scrollHeight;
                }
                scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
                return scrollHeight;
            },
            //浏览器视口的高度
            getWindowHeight: function () {
                var windowHeight = 0;
                if (document.compatMode == "CSS1Compat") {
                    windowHeight = document.documentElement.clientHeight;
                } else {
                    windowHeight = document.body.clientHeight;
                }
                return windowHeight;
            },
            // 下拉加载ajax
            pullRefresh: function () {
                var _this = this;
                window.onscroll = function () {
                    _this.scrollChange()
                }
            },
            scrollChange: function () {
                var _this = this,
                    currentPage = {page: this.page};
                this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
                // 把下拉刷新置为false，防止多次请求
                if (this.scollY >= -50) {
                    if (this.page > this.pageTotal) {
                        return false;
                    }
                    if (!this.pullRefreshss) {
                        return false;
                    }
                    // 模拟ajax请求
                    setTimeout(function () {
                        axios.get('http://test.com', {
                            params: currentPage
                        }).then(function (res) {
                            // 请求完成后，把得到的数据拼接到当前dom里面
                            _this.message = _this.message.concat(res.data.artDetail);
                        }).catch(function (err) {
                            console.log(err)
                        })
                    }, 2000)
                    _this.pullRefreshss = false;
                    // 加页码数
                    this.page++;
                } else {
                    // 其他时候把下拉刷新置为true
                    _this.pullRefreshss = true;
                }
            }
        },
        created: function () {
            this.pullRefresh();
        }
    })
</script>
</body>
</html>
View Code

参数说明

        data: {
            message: Data.artDetail,  //初始数据代码
            pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
            page: 1, //代表页面的初始页数
            scollY: null,// 离底部距离有多少
            pageTotal: 7 //总页数
        }

js代码说明：前三个函数是求滚动条距离底部的距离，最后一个scrollChange是在滚动途中触发的。通过concat方法拼数据即可，无需考虑dom的变化，适当时候控制pullRefreshss的值

防止多次请求。

   methods: {
            //文档的总高度
            getScrollTop: function () {
                var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
                if (document.body) {
                    bodyScrollTop = document.body.scrollTop;
                }
                if (document.documentElement) {
                    documentScrollTop = document.documentElement.scrollTop;
                }
                scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
                return scrollTop;
            },
            //浏览器视口的高度
            getScrollHeight: function () {
                var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
                if (document.body) {
                    bodyScrollHeight = document.body.scrollHeight;
                }
                if (document.documentElement) {
                    documentScrollHeight = document.documentElement.scrollHeight;
                }
                scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
                return scrollHeight;
            },
            //浏览器视口的高度
            getWindowHeight: function () {
                var windowHeight = 0;
                if (document.compatMode == "CSS1Compat") {
                    windowHeight = document.documentElement.clientHeight;
                } else {
                    windowHeight = document.body.clientHeight;
                }
                return windowHeight;
            },
            // 下拉加载ajax
            pullRefresh: function () {
                var _this = this;
                window.onscroll = function () {
                    _this.scrollChange()
                }
            },
            scrollChange: function () {
                var _this = this,
                    currentPage = {page: this.page};
                this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
                // 把下拉刷新置为false，防止多次请求
                if (this.scollY >= -50) {
                    if (this.page > this.pageTotal) {
                        return false;
                    }
                    if (!this.pullRefreshss) {
                        return false;
                    }
                    // 模拟ajax请求
                    setTimeout(function () {
                        axios.get('http://test.com', {
                            params: currentPage
                        }).then(function (res) {
                            // 请求完成后，把得到的数据拼接到当前dom里面
                            _this.message = _this.message.concat(res.data.artDetail);
                        }).catch(function (err) {
                            console.log(err)
                        })
                    }, 2000)
                    _this.pullRefreshss = false;
                    // 加页码数
                    this.page++;
                } else {
                    // 其他时候把下拉刷新置为true
                    _this.pullRefreshss = true;
                }
            }
        }

本例子只是模拟方法，实际情况可能有所不同。有其他方法，大家一起讨论学习。


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 vux-scroller实现移动端上拉加载功能 基于Vue2实现的上拉加载之移动端 vue.js 3.2.20: 用rem实现移动端和pc的兼容 Vue 移动端 上拉加载更多 iscroll 移动端上拉刷新 下拉加载 实例 ！ javascript-- 基于jQuery的模仿移动端上拉加载更多控件 原生js移动端touch事件实现上拉加载更多 Web前端开发 --》 如何实现页面同时在移动端和pc端的兼容问题 Vue判断设备是移动端还是pc端 vue 在移动端实现红包雨 （兼容性好）
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM