Vue+jquery上拉加载

<ul>
      <li class="new-list" v-for="item in proarr">
        <a :href="‘/index.php/new/news?id=‘+item.id" class="new-item">
          <div class="new-title ell">{{item.title}}</div>
          <div class="new-content">
            <div class="new-cover" v-bind:style="{backgroundImage: ‘url(‘+item.purl+‘)‘}"></div>
            <div class="new-desc">{{item.introduction}}</div>
          </div>
          <div class="new-date">{{item.create_date}}</div>
        </a>
      </li>
    </ul>
  <div id="ajaxloading" v-show="showLoading" class="ac line-scale-pulse-out-rapid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p class="errormsg ac orange pd20">{{errmsg}}</p>
new Vue({
  el: ‘#app‘,
  data() {
    return {
      proarr: [],
      showLoading: false,
      p:1,
      errmsg:‘‘
    };
  },
  components: {
  },
  created() {
    this.getProList();    //监听滚动
      window.addEventListener(‘scroll‘, this.handleScroll);
  },
  methods: {
    handleScroll() {    //判断滚动到底部
      if ($(window).scrollTop() >=$(document).height() - $(window).height()) {
        this.showLoading = true;
        this.p++;
        this.getProList(this.p);
      }
    },
    getProList() {
      var that = this;
      $.post(‘url‘,{p:this.p},function(datas){
            var state = datas.sign;
        that.showLoading = false;
        if (state === ERROK) {
          var data = datas.data.data;
          for (var i = 0; i < data.length; i++) {
            that.proarr.push(data[i]);
          }
          that.errmsg=‘‘;
        } else {
          that.errmsg=‘暂无更多数据‘;
        }
        },‘json‘);
    }
  }
})

开始碰到个坑。请求到的数据我直接push到循环数组中,结果整个数组变成一个元素,后来想了想用循环把每一条数据分别push才解决这个问题

时间: 2024-10-12 17:48:41

Vue+jquery上拉加载的相关文章

vue之better-scroll的封装,包含下拉刷新,上拉加载功能及UI(核心为借鉴,我仅仅是给轮子套上了外胎...)

先发原文作者.地址等信息.我把内容全部搬过来了,也可以去看原文.内容绝对是满满的干货,给原作者点赞!(我添加的内容在转载过来的后面,内容不多) 作者: ustbhuangyi 链接:http://www.imooc.com/article/18232 来源:慕课网 在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开"微信 -> 钱包->滴滴出行"体验效果. 我们在实

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实现瀑布流,这里选择绝对定位方式: 关键问题:由于每张图片的宽高不一样,而瀑布流中要求所有图片的宽度一致,高度随宽度等比缩放.而且由于图片的加载是异步延迟.在不知道图片高度的情况下,每个图片所在的item盒子不好绝对定位.因此在渲染页面前先获取所有图片的高度,是解决问题的关键点!这里选择用JS中的Im

javascript-- 基于jQuery的模仿移动端上拉加载更多控件

简单实现手机端上拉加载更多,通过触发trigger()事件,触发原先已经写好的请求 css样式 .more{ padding: 10px 10px; height:50px; background:#fff; background-clip:content-box; text-align: center; line-height:50px; font-family:"Microsoft Yahei"; display: none; } html代码 <div class=&quo

MUI上拉加载下拉刷新

<!-- 作者:2444626121@qq.com 时间:2017-11-02 描述:如果有问题请邮箱联系我,并注明来自博客园,谢谢呢^o^ --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,min

angual+mui 双栏上拉加载,微信里面禁用默认事件可用,可以防止浏览器回弹效果

//html 部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #596972 }

angual+ mui 导航切换实现上拉加载

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2b9edb } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; min-height: 18.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #d76019 } p.p4 {

vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版

在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://www.cnblogs.com/sichaoyun/p/6647458.html <template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(st

mui上拉加载

最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css"> <script src="js/jquery-3.2.0.min.js"></script> <script src="common/mui/js/mui.min.js"><

HTML5手机端手指滑动上拉加载代码

在线预览   源码下载 HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发.该特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!