chronomancy
chronomancy
采纳率7.1%
2017-06-18 01:52

取20条数据一次显示5条数秒后换后5条

5

使用ajax和vue.js获取20条数据,一次显示5条,数秒后显示后5条,依次循环,在不使用滑屏轮播的情况下该怎么实现?
现在可以定时取数据,但是只显示了5条数据不会刷新,请问有类似的实例告诉我该怎么做么

 <div id="line" class="line" v-for="row in boatList | limitBy 20">
                            <div class="item w1"><span>{{row.boatName}}</span></div>
                            <div class="item w2"><span>{{row.voyage}}</span></div>
                            <div class="item w3"><span>{{row.shipment | date 'YYYY-DD-MM'}}</span></div>
                            <div class="item w4"><span>{{row.statusDesc}}</span></div>
                            <div class="item w5"><span>{{row.demurrage}}</span></div>
                        </div>
 function boatInfo() {
                        $ajax("screen/boat/info.do", {}, function (data) {
                            if (data.success) {
                                vm.boatList = data.body.listVO;
                                vm.boatDetail = data.body.detailVO;
                                vm.boatCoalList = data.body.detailVO.boatCoalListVOs;
                            }
                        })
                    }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • warmcore warmcore 4年前

    1、写个funciton,这个可以是触发式,也可以是载入页面后自动运行的,在这个函数里面写个定时器,定时调用那个ajax函数去获取数据
    2、修改你的ajax函数,加个形参,每次传入当前页的页码,发送给后台,就能获得不同的数据。当然,要判断页码的范围,比如大于页码让它回到首页
    3、把每次获得的数据替换进显示区域,如果想美观点,可以加点过度动画。
    以上需要后台配合分页

    点赞 评论 复制链接分享
  • Fingertipy Fingertipy 4年前

    定时调用ajax,并且把页码通过ajax转给后台,后台通过页码把相应的数据发送给你,直接调用即可

    点赞 评论 复制链接分享