vue下拉自动刷新上拉加载更多

最新推荐文章于 2025-06-19 22:23:49 发布

frt6668

最新推荐文章于 2025-06-19 22:23:49 发布

阅读量9.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/u010615629/article/details/80914443

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-scroller组件实现下拉刷新和上拉加载更多的功能。提供了git仓库、演示链接、下载地址以及源码示例，帮助开发者快速集成和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件：vue-scroller

git：https://github.com/wangdahoo/vue-scroller

demo：https://wangdahoo.github.io/vue-scroller/#/customSpinner

下载链接：https://unpkg.com/vue@2.1.10/dist/vue.min.js

https://unpkg.com/vue-scroller@2.2.0/dist/vue-scroller.min.js

使用方法：https://jsfiddle.net/wangdahoo/cpjfr096/

源码例子：

<html>
  <head>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    
<style>
    html, body {
        margin: 0;
    }

    * {
        box-sizing: border-box;
    }

    .row {
        width: 100%;
        height: 1.2rem;
        /*padding: 10px 0;*/
        font-size: .3rem;
        line-height: 1.2rem;
        text-align: center;
        color: #3f3f3f;
        background-color: #fff;
        margin: 0;
    }

    .grey-bg {
        background-color: #eee;
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        height: 44px;
        width: 100%;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
        background-color: #fff;
        z-index: 1000;
        color: #666;

    }

    .header > .title {
        font-size: 16px;
        line-height: 44px;
        text-align: center;
        margin: 0 auto;
    }
    .left{
        float: left;
        padding-left: .3rem;
    }
    .right{
        float: right;
        padding-right: .3rem;
        line-height: .6rem;
        width: 2.2rem;
        font-size: .24rem;
    }

</style>


  </head>
  <body class="easyui-layout">

  

    <div id="app">
        <div class="header">
            <h1 class="title">抽奖历史记录</h1>
        </div>
        <scroller :on-refresh="refresh"
                  :on-infinite="infinite"
                  ref="my_scroller"
                  style="padding-top: 44px;">
            <div v-for="(item, index) in items" class="row" :class="{ 'grey-bg': index % 2 == 0 }">
                <span class="left">{{ item.product_name }}</span>
                <span class="right">{{ item.create_time }}</span>
            </div>
        </scroller>
    </div>



  </body>
  <script src="/public/common/js/jquery.min.js"></script>

  <script src="/public/common/js/vue.min.js"></script>

  
<script src="/public/common/js/vue-scroller.min.js"></script>
<script>
    var v1 = new Vue({
        el: '#app',

        data: {
            items: [],
            page:1
        },

        mounted: function () {

        },

        methods: {

            get_list: function (fn) {
                var data = { uid:getQueryString('uid'),token:getQueryString('token'),page:this.page };
                var self = this
                request("history",data,'post', function (data) {
                    

                    $.each(data.data, function (k,v) {
                        self.items.push(v);
                    })
                    self.bottom += data.data.length;
                    if(typeof (fn) == "function"){ fn(data.data.length==0); }
                }, function () {

                },false)
            },



            refresh: function (done) {
                var self = this
                self.page = 1;
                self.items=[];


            },

            infinite: function (done) {
                var self = this

                self.get_list(function (is_finish) {
                    if(is_finish) {
                        self.$refs.my_scroller.finishInfinite(2);
                        return;
                    }
                    done();
                    self.page =  self.page + 1;
                });

            }
        }
    });
</script>




</html>