vue加载更多，上拉刷新 VueScroller 简单化思维

wangbjun 发布于2019-08-02 12:11 / 3394人阅读

摘要：今天给大家分享上拉刷新，加载更多的组件的使用第一步安装第二部配置第三部开始使用内容部分如下上拉加载已弃用，下拉刷新

今天给大家分享vue上拉刷新，加载更多的组件VueScroller的使用

第一步安装：

npm install vue-scroller -D

第二部配置 main.js

import VueScroller from "vue-scroller"
Vue.use(VueScroller)
第三部开始使用


    //内容

js部分如下

methods:{
    //上拉加载
    infinite:function(){
      console.log("infinite")
      this.timeout = setTimeout(()=>{
        if (this.myData.length >= 20) {
         this.$refs.my_scroller.finishInfinite(true);
        }else{
          this.$refs.my_scroller.finishInfinite(false);
        }
        //this.$refs.my_scroller.resize();//已弃用，
        this.myData.push(this.myData[1]);
      }, 1500)
    },
    //下拉刷新 
    refresh:function(){
      console.log("refresh")
      this.timeout = setTimeout(()=>{
        this.$refs.my_scroller.finishPullToRefresh()
      }, 1500)
    }
}

混合云 idc机房托管 html上拉下拉刷新加载更多下拉加载更多 jquery加载更多

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53397.html

vue加载更多，上拉刷新 VueScroller 简单化思维

摘要：今天给大家分享上拉刷新，加载更多的组件的使用第一步安装第二部配置第三部开始使用内容部分如下上拉加载已弃用，下拉刷新今天给大家分享vue上拉刷新，加载更多的组件VueScroller的使用第一步安装： npm install vue-scroller -D 第二部配置 main.js import VueScroller from vue-scrollerVue.use(VueScr...

jackzou 2019-08-23 13:52 评论0 收藏0
移动端下拉刷新、上拉加载之vueScroll

摘要：移动端开发，处理列表翻页和数据的时候，下拉刷新和上拉加载应用的比较广泛，今天给大家推荐一个的插件，，首先上图话不多说，上代码了一引入并使用二在或者组件里面使用三在文件里面操作插件首先在在里面写上方法在里面实现申明好然后继续在里面写上刷新和移动端开发，处理列表翻页和数据的时候，下拉刷新和上拉加载应用的比较广泛，今天给大家推荐一个vue的插件，vueScroll，首先上图： showIm...

张汉庆 2019-08-23 16:15 评论0 收藏0
webpack+vue+mint-ui 实现上拉加载更多（Loadmore组件）

摘要：因为业务的需要界面需要实现分页的功能，所以我就研究了一下如何利用自带的组件实现上拉加载更多功能。代码如下上拉加载更多初始化方法如下下面便是上拉加载更多的方法这样就大功告成啦因为业务的需要界面需要实现分页的功能，所以我就研究了一下如何利用mint-ui自带的loadmore组件实现上拉加载更多功能。首先在文件中引入组件 import {Indicator, Loadmore} f...

LiuZh 2019-08-20 15:35 评论0 收藏0