vue制作加载更多功能的正确打开方式_javascript技巧

使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该使用concat()拼接两个数组。

//这是错误的写法
$.ajax({
        type:'get',
        async:false,
        url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2',
        dataType: "json",
        success: function(msg){
          _self.$set('loadMore', msg);
          _self.conList.push(_self.loadMore);
        }
      });
//这是正确的写法
$.ajax({
        type:'get',
        async:false,
        url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2',
        dataType: "json",
        success: function(msg){
          _self.$set('main',_self.main.concat(msg))
        }
      });

模拟ajax数据加载测试地址:https://jsfiddle.net/zhoou/96mnckgL/

总结:还是自己js基础知识不扎实,push和concat两个函数用法没有搞清楚,如果你有更好的方法欢迎讨论。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索vue.js
, 动态加载页面
, 图片懒加载
动态加载组件
javascript vue、mongovue javascript、vue 滚动加载、vue上拉加载、vue动态加载组件,以便于您获取更多的相关知识。

时间: 2024-10-25 16:09:38

vue制作加载更多功能的正确打开方式_javascript技巧的相关文章

使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src=&

js实现加载更多功能实例_javascript技巧

项目的一个前端页面展示已购买商品时,要求能下拉加载更多.关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心.再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展.想继续使用iscroll.js实现加载更多功能的,上面给的链接可以看看. h5项目里需要实现简单的分页功能,由于是移动端,考虑用『加载更多』会更好,而不是PC端

Android Recyclerview实现上拉加载更多功能

在项目中使用列表的下拉刷新和上拉加载更多是很常见的功能,下拉刷新我们可以用Android自带的SwipeRefreshLayout这个很好解决.但是上拉加载更多就要去找一些框架了,刚开始的时候我找到一个Mugen的github开源框架,但是有个问题,当页面能够一次加载全部item的时候,上拉加载的功能就失效了. 这是因为当界面一次能够加载完全部item的时候,继续往上拉,Recyclerview的滑动监听,中的onScrolled方法只会在页面加载的时候调用一次,只后就不会被调用了,并且dy=0

Android RecyclerView上拉加载更多功能回弹实现代码

实现原理是使用RecyclerView的OnTouchListener方法监听滑动 在adapter里面增加两项footview 其中date.size为显示的加载条,可以自定义,date.size+1为空白的View,我们设置其高度为0 我们通过LinearLayoutManager的 findLastVisibleItemPosition判断显示的最后一条数据,如果是空白view,表示加载条已经完全展示,松开即可刷新. 回弹效果是通过在滑动时动态改变空白view的高度,达到阻尼效果 ,回弹时

Android RecyclerView添加上拉加载更多功能_Android

上一篇文章已经介绍了如何为RecyclerView添加FootView,在此基础上,要添加分页加载的功能其实已经很简单了. 上一篇文章地址:为RecyclerView添加FootView和HeadView 效果:(源码在文章结尾) 实现关键 在上一篇代码的基础上,只需要在onBindViewHolder(ViewHolder holder, int position)函数中添加一定修改就可以了,如下: @Override public void onBindViewHolder(ViewHold

iOS开发UI篇—在UItableview中实现加载更多功能

一.实现效果 点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据. 二.实现代码和说明 当在页面(视图部分)点击加载更多按钮的时候,主页面(主控制器)会加载两条数据进来. 视图部分的按钮被点击的时候,要让主控制器加载数据,刷新表格,2B青年会在视图中增加一个主控制器的属性,通过这个属性去调用进行加载,但在开发中通常通过代理模式来完成这个操作. 下面分别是两种实现的代码. 1.项目结构和说明 说明:加载更多永远都放在这个tableview的最下端,因此这里设置成了这个tableview的

GridView基于pulltorefresh实现下拉刷新 上拉加载更多功能(推荐)_Android

原理和listview一样 ,都是重写Android原生控件 Activity package com.example.refreshgridview; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.widget.GridView; import android.widget.Toast; import

Android RecyclerView添加上拉加载更多功能

上一篇文章已经介绍了如何为RecyclerView添加FootView,在此基础上,要添加分页加载的功能其实已经很简单了. 上一篇文章地址:为RecyclerView添加FootView和HeadView 效果:(源码在文章结尾) 实现关键 在上一篇代码的基础上,只需要在onBindViewHolder(ViewHolder holder, int position)函数中添加一定修改就可以了,如下: @Override public void onBindViewHolder(ViewHold

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果_实用技巧

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面