精华内容
下载资源
问答
  • 今天我们手动封装一个下拉加载更多组件,类似于vant组件库中的list功能 loading.vue <template> <div class="infinite-loading" ref="container"> <div class="loading" v-if="loading"> &...

    今天我们手动封装一个下拉加载更多组件,类似于vant组件库中的list功能

    loading.vue

    <template>
      <div class="infinite-loading" ref="container">
        <div class="loading" v-if="loading">
          <span class="img"></span>
          <span class="text">正在加载...</span>
        </div>
        <div class="none" v-if="finished">
          <span class="img"></span>
          <span class="text">亲,没有更多了</span>
        </div>
      </div>
    </template>
    
    <script>
    import { ref } from 'vue'
    import { useIntersectionObserver } from '@vueuse/core'
    export default {
      name: 'InfiniteLoading',
      props: {
        loading: {
          // 判断上一页数据是否加载完成
          type: Boolean,
          default: false
        },
        // 判断列表是否还有更多数据可以加载
        finished: {
          type: Boolean,
          default: false
        }
      },
      setup(props, { emit }) {
        const container = ref(null)
        useIntersectionObserver(
          // 参数一:被监听的dom元素
          container,
          ([{ isIntersecting }], dom) => {
            if (isIntersecting) {
              // 进入可视区了,发请求获取下一页数据
              // 发请求的条件:上一次数据已经加载完成,且  列表还有更多数据可以加载
              if (props.loading === false && props.finished === false) {
                emit('infinite')
              }
            }
          },
          {
            threshold: 0
          }
        )
        return { container }
      }
    }
    </script>
    
    <style scoped lang="less">
    .infinite-loading {
      .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        .img {
          width: 50px;
          height: 50px;
          background: url(../../assets/images/load.gif) no-repeat center / contain;
        }
        .text {
          color: #999;
          font-size: 16px;
        }
      }
      .none {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        .img {
          width: 200px;
          height: 134px;
          background: url(../../assets/images/none.png) no-repeat center / contain;
        }
        .text {
          color: #999;
          font-size: 16px;
        }
      }
    }
    </style>
    

     加载更多组件封装好啦,我们直接在其他组件用就可以了,只要给组件传两个属性,一个是loading  一个是finished,通过这两个标志类来进行数据的加载更多

    loading:判断上一次数据是否加载完

    finished:判断是否还有数据

    展开全文
  • 下面是关于在 vue中使用better-scroll 组件的时候 需要下来加更多不止一次加载场景 /* * pullingUp: 监听的应该是,元素滚动过程中,被滚动的那个元素的底边与父级外框底边的距离,如果达到某个值,就执行其回调函数...

    下面是关于在 vue中使用better-scroll 组件的时候 需要下来加更多不止一次加载场景
    /*
    * pullingUp: 监听的应该是,元素滚动过程中,被滚动的那个元素的底边与父级外框底边的距离,如果达到某个值,就执行其回调函数;
    * finishPullUp: 这个类似控制一个开关,比如在触发pullingUp事件的时候,插件肯定会把一个开关给关掉,防止用户重复上拉
    * 在数据加载完成以后,需要执行finishPullUp()把开关打开,以便下次可以继续执行上拉刷新;
    * refresh:其实就是重新计算一下内容的高度和宽度,也许也会计算外框的高度和宽度,因为dom结构发生了变化了,所以宽高要从新计算
    * 以为整个插件基本上都是在计算一些距离差值,所以肯定需要从新计算的;
    */
    如下业务场景

    在这里插入图片描述
    通过子组件往父组件传递 下来加载信息 然后父组件 调用子组件 再次使用下来加载 调用接口返回数据
    自己封装一个scroll.vue 文件 里面引用 better-scroll 组件(子组件)

    <template>
      <div class="wrapper" ref="wrap">
        <div class="content">
          <slot></slot>
        </div>
      </div>
    </template>
    
    <script>
    import BScroll from "better-scroll";
    
    export default {
      name: "Scroll",
      props: {
        probeType: {
          type: Number,
          default: 0,
        },
        pullUpLoad: {
          type: Boolean,
          default: true,
        },
      },
      data() {
        return {
          scroll: null,
        };
      },
      mounted() {
        this.scroll = new BScroll(this.$refs.wrap, {
          probeType: this.probeType,
          pullUpLoad: this.pullUpLoad,
          click: true,
        });
        // 监听滚动的位置
        this.scroll.on("scroll", (position) => {
          this.$emit("scroll", position);
        });
        // 监听上拉事件 上拉加载更多
        this.scroll.on("pullingUp", () => {
        // 子组件往父组件传值
          this.$emit("pullingUp");
        });
      },
      methods: {
        scrollTo(x, y, time = 500) {
        // 向上箭头的设置
          this.scroll.scrollTo(x, y, time);
        },
        finishPullUp(){
        // 不止一次加载更多
          this.scroll.finishPullUp()
        }
      },
    };
    </script>
    
    <style  scoped>
    </style>
    

    父组件

    <template>
      <div id="home">
        <scroll
          class="content"
          ref="scroll"
          @scroll="contentScroll"
          :probe-type="3"
          :pull-up-load="true"
          @pullingUp="loadMore"
        >
          <swiper :banner="banner"></swiper>
          <recommend-view :recommends="recommends"></recommend-view>
          <feature-view></feature-view>
          <tab-control
            class="control"
            :titles="titles"
            @tabClick="tabClick"
          ></tab-control>
    
          <good-list :goods="showGoods"></good-list>
        </scroll>
        <back-top @click.native="topClick" v-show="topTrue"></back-top>
      </div>
    </template>
    
    <script>
    
    import TabControl from "components/content/tabControl/TabControl.vue";
    
    import { getHomeMultidata, getHomeGoods } from "network/home";
    
    import GoodList from "components/content/goods/GoodList.vue";
    
    import Scroll from "components/common/scroll/Scroll.vue";
    import BackTop from "components/content/backTop/BackTop.vue";
    
    export default {
      name: "Home",
      components: {
    
        TabControl,
        GoodList,
        Scroll,
        Scroll,
        BackTop,
      },
      data() {
        return {
          banner: [],
          recommends: [],
          titles: [],
          goods: {
            pop: {
              page: 0,
              list: [
               {}
              ],
            },
            new: {
              page: 0,
              list: [
               {}
              ],
            },
            sell: {
              page: 0,
              list: []
              },
        this.getHomeGoods("pop");
        this.getHomeGoods("new");
        this.getHomeGoods("sell");
      },
      computed: {
        showGoods() {
          return this.goods[this.curretnType].list;
        },
      },
    
      methods: {
        /* 
          网络请求事件 自己封装网络请求,方便调用数据和使用
        */
        getHomeMultidata() {
          getHomeMultidata().then((res) => {
            this.banner = res.data.banner;
            this.recommends = res.data.recom;
          });
        },
        getHomeGoods(type) {
          const page = this.goods[type].page + 1;
          getHomeGoods(type).then((res) => {
            this.goods[type].list.push(...res.data.list);
            this.goods[type].page += 1;
            // 通过调用子组件的方法来使用 多次加载
            this.$refs.scroll.finishPullUp();
          });
        },
    
        /* 
          点击事件
        */
        tabClick(index) {
          switch (index) {
            case 0:
              this.curretnType = "pop";
              break;
            case 1:
              this.curretnType = "new";
              break;
            case 2:
              this.curretnType = "sell";
              break;
          }
        },
    
        // 事件监听
        topClick() {
          // this.$refs.scroll 可以访问子组件中的里面的任何东西
          this.$refs.scroll.scroll.scrollTo(0, 0, 500);
        },
        contentScroll(position) {
          this.topTrue = Math.abs(position.y) > 800;
        },
        loadMore() {
          // 通过 curretnType 来判断 点击类型 然后进行数据请求 并且 页数加1
          this.getHomeGoods(this.curretnType);
        },
      },
    };
    </script>
    
    展开全文
  • 发现了这些监听滚动来加载更多组件的共同点,因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的,所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多,所以对于无限滚动加载不需要写...

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点,

    因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的,

    所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多,

    所以对于无限滚动加载不需要写首次载入列表的函数,

    代码如下:

    html:

    //父组件

    //LifeLists组件:

    //LifeListItem组件:

    {{item.title}}

    {{item.monetaryUnit}}{{item.price}}

    {{item.title}}

    发布于{{formatTime(item.createAt)}}

    {{item.countryName}} {{item.cityName}}

    {{item.detail}}

    {{item.like}}

    {{item.commentCount}}

    vue.js

    //data:

    page:0,

    size:10,

    loadingTextBtn:false,

    loadingText:"努力加载中",

    loadingComplete:false,

    refreshComplete:false,

    city:"",

    country:""

    //methods:

    loadMore() {

    this.loading = true;

    this.loadingTextBtn=true;

    if(parseInt(this.page)==0){

    this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size});

    this.page++;

    }else if(parseInt(this.page)>0&&parseInt(this.page)

    setTimeout(() => {

    // this.$store.dispatch('loadMoreLifeList',{city:this.city,country:this.country,category:"",page:this.page,size:this.size})

    this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size});

    this.page++;

    }, 1000);

    }else{

    this.loadingText="已全部加载完成";

    this.loadingComplete=true;

    this.loading = false;

    }

    },

    这里重要的是判断,当当前页面为0的时候,即第一页的时候,不需要setTimeout定时器,直接请求加载,当加载更多的时候可以加个定时器。

    网上找到很多mint-ui 的loadmore组件来实现上拉加载更多,由于上拉触发相应的加载更多事件,所以当进入页面的时候应该不会自动载入数据,则这里可以加一个获取第一页数据的函数。

    展开全文
  • }}exportdefault{name:'App4',components: {},data() {return{page:1,//当前页total: 0,//总数据数量pageSize: 10,//每页几个loadTxt: {more:"正在加载...",none:"没有更多了~",err:"加载失败~"},loadKey:"none",.....
    {{item}}
    {{ loadTxt[loadKey] }}

    name:'App4',

    components: {

    },

    data() {return{

    page:1,//当前页

    total: 0,//总数据数量

    pageSize: 10,//每页几个

    loadTxt: {

    more:"正在加载...",

    none:"没有更多了~",

    err:"加载失败~"},

    loadKey:"none",

    datalist: [],//数据列表

    loading: false,

    dataMax:0};

    },

    mounted() {this.getWithdrawalList();//一进入页面就调用获取数据的方法

    },

    methods: {

    getWithdrawalList() {

    console.log("进入getWithdrawalList");var _this = this;this.loadKey = "more";//把展示改为"正在加载..."

    //调用获取数据的接口,这里是用封装的axios

    //record({

    //"pageIndex": _this.page,

    //"pageSize": _this.pageSize

    //}).then(res => {

    //if (res.data.code == 200) {

    //var info = res.data.content || null;

    //if (info) {

    //_this.total = info.count;

    //var data = info.list || [];

    //_this.datalist = _this.datalist.concat(data);

    //if (_this.total == _this.datalist.length) {

    //_this.loadKey = "none";

    //}

    //} else {

    //_this.loadKey = "err";

    //}

    //}

    //});

    setTimeout(function(){for(let j=_this.dataMax, len = 10; j

    _this.datalist.push(j)

    }

    _this.dataMax+=10;

    _this.total= 32;if (_this.total < _this.datalist.length) {//这里我假设数据加载完了

    _this.loadKey = "none";this.loading = true}//console.log(_this.total);

    //_this.loadKey = "none";

    },1000);

    },

    loadMore() {

    console.log("进入loadMore 要在手机上才有效果");

    let page= this.page;

    let size= this.pageSize;

    let total= this.total;

    let length= this.datalist.length;

    let num= page *size;if (num < total && num ===length) {

    console.log("loadMore......1111");++this.page;this.getWithdrawalList();

    }

    },

    }

    }

    width:100%;

    background-color: #f6f6f6;

    padding:0.5rem 1rem 1rem;

    }

    .list{

    width:100%;

    height:2.5rem;

    border: 1px solid #ccc;

    margin-bottom: 0.5rem;

    display: flex;

    justify-content: center;

    align-items: center;

    }

    .l-load {

    text-align: center;

    font-size: 0.625rem;

    color: #aaa;

    margin-top: 1rem;

    }

    展开全文
  • 本文实例讲述了vue实现的上拉加载更多数据/分页功能。分享给大家供大家参考,具体如下:加载状态jsexport default {name: '',data () {return {list: [],now_item: '',current_index: 0,list_param: {page: 1},no_...
  • 组件源码 .vue文件style="height:100%;overflow:auto"ref="filesTable">ref="tableInner"class="tableInner">...},mounted() {// 滚动加载更多const _this = this;const _filesTable = thi...
  • Vue向下滚动加载更多数据-scroll-案例

    千次阅读 多人点赞 2021-08-08 14:42:40
    尽管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 实现范例 官方给的代码范例是假设你在根组件写代码,...
  • 下拉更新松开更新更新中加载中……exportdefault{props: {offset: {type: Number,default: 40},enableInfinite: {type: Boolean,default: true},enableRefresh: {type: Boolean,default: true},onRefresh: {type: ...
  • 1.加载更多封装成全局组件,步骤跟我封装全局轮播图,全局骨架屏一样,可以看一下: <template> <div class="xtx-infinite-loading" ref="target"> <!-- 正在加载数据时显示 --> <div class=...
  • 1.局部引用安装的vant 的list在当前有滚动加载更多引如import Vue from 'vue'import { List } from 'vant'import 'vant/lib/index.css'Vue.use(List);2.在data变量中定义data() {return {offset:0,//滚动条与底部...
  • everyLoadingNum: 3, // 每次加载的个数 pullUpState: 2, // 子组件的pullUpState状态 pullUpList: [], // 上拉加载更多数据的数组 showPullUpListLength: this.initialShowNum // 上拉加载后所展示的...
  • 本人正在使用 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉升级 上拉更多的,挺好用的,共享给大家。直接上代码,不懂的多看几遍,下面我换会告诉大家怎么使用。:class="{'down':(state===...
  • vue组件的封装 <template> <div class="infinite-list-wrapper" ref="scrollView" style=""> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" > <!-- ...
  • Vue实现页签组件

    2021-02-11 14:59:38
    也可以到我的github上看看代码(如果觉得这个组件有用的话,别忘了顺手给个小星星)我这个页签组件里面的删除缓存的方法不是使用keep-alive组件自带的include、exculde结合的效果,而是使用暴力删除缓存的方法,这个...
  • Vue中的异步组件

    2020-12-29 14:58:00
    特别声明,本文根据@Alex Jover Morales的《Async Vue.js Components》一文所整理。随着应用程序越来越大,你开始考虑优化应用程序,使其变得快。在此过程中,你可能使用了拆分代码和延迟加载这两种方法,它们通过...
  • 本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景——分页/无限加载,帮助读者好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比,全面的展示使用Vue.js完成一个需求的思考过程;与...
  • 一个页面包含个楼层,每个楼层是一个单独的组件。每个组件内部有自己的逻辑。 页面是类似于个人中心的福利页面,每个楼层展示对应礼包的图片,用户进入页面以后,在满足条件的前提下,自动弹出领取礼包的弹窗。 ...
  • 这个需求咋这么奇怪呢?这个需求想让一个组件完成默认兜底的功能,比如某个产品的显示,...这里使用import,webpackage可以支持动态载入组件,当然直接引入组件也是可以的。 { path: '/test', component: Layout, h.
  • vue3 骨架屏+上拉加载更多封装 介绍 因业务需求要用到滚动加载,就用到了vant组件库里的List组件,然后突发奇想封装了个骨架屏进去,api和使用方法还有文档都参考了vant的list组件,不过没有参考源码,此组件是我...
  • Vue.js实现的上拉加载更多数据/分页功能示例发布于 2020-8-13|复制链接摘记: 本文实例讲述了vue实现的上拉加载更多数据/分页功能。分享给大家供大家参考,具体如下:加载状态```xhtml..本文实例讲述了vue实现的上拉...
  • Vue.js 组件

    2021-06-25 00:49:56
    组件本节介绍 Vue.js组件的使用。组件Vue.js 最强大的功能之一,使用组件可以扩展 HTML 元素,封装可重用的代码。使用组件注册之前说过,我们可以用 Vue.extend() 创建一个组件构造器:var MyComponent = Vue....
  • 简化一下我们的业务流程:通过异步请求获取数据组件接受数据并渲染个人比较推荐使用组件内部钩子,在小的颗粒度下控制异步流程。主要使用到的是 beforeRouteEnter 和 beforeRouteUpdate 钩子。export default {...
  • 强制Vue重新渲染组件的方法发布时间:2020-06-24 16:09:56来源:亿速云阅读:217作者:元一这篇文章运用简单易懂的例子给大家介绍强制Vue重新渲染组件的方法,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对...
  • app.vue组件如何按需加载?按需加载组件,或者异步组件,主要是应用了component的 is 属性1、template中的代码:这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名type="text"size="mini"@...
  • 从属性和方法来看,组件有实例的大部分方法,如果Vue实例是孙悟空,组件就好比实例的一个毫毛,变化多端却为Vue实例所用。目录:组件的注册is的作用event,props,solts动态组件组件的注册(差不多抄官网)有两种方式...
  • Vue实现下拉加载更多

    2021-06-19 23:27:47
    Home组件代码示例如下: <div class="home"> <one-type-nav></one-type-nav> <banner></banner> <good-list :list="goodsData"></good-list> <div class=...
  • 在对vue3.0的使用和学习中,发现了很和以前不一样的方法,这里聊一聊vue3.0中给我们提供的全局的注册组件方法 官方文档:入口 目录: 具体方法介绍: 1、前提:返回一个提供应用上下文的应用实例。应用实例...
  • 效果:数据未回来就是加载中,加载数据完成后就会显示没有更多的数据了 步骤一,定义无限下拉的商品组件:xtx-infinite-loading.vue 使用了vueuse中的useIntersectionObserve来监听是否达到了可视化界面中,如果到达...
  • 首先来个前言原来Vue的dom更新是异步的,当数据发生变化,vue并不是里面去更新dom,而是开启一个队列。跟JavaScript原生的同步任务和异步任务相同。Vue在一个同步任务过程中是不会去更新渲染视图,而是在同步任务...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,222
精华内容 12,888
关键字:

vue加载更多组件

vue 订阅