美文网首页
利用swiper+AJAX 分页获取数据,实现文字滚动轮播

利用swiper+AJAX 分页获取数据,实现文字滚动轮播

作者: 真是个非常帅气的昵称呢 | 来源:发表于2019-11-06 17:28 被阅读0次

需求:有一个参与抽奖的参与者列表,需要上下滚动轮播参与者信息,每隔1分钟请求一次接口,如果请求到数据,则将数据添加到原列表中,类似分页加载。

问题1

因为swiper的数据是动态加载的,刚开始

    function getListData(activityId, page) {
      _ajax(apiUrl.list, 'GET', { activityId, page: page }, function (res) {
        const list = res.data
        var html = ""
        for (var i = 0; i < 6; i++) {
          html += `<div class="swiper-slide">
              <span class="name">${i}上错错错错错错</span>
              <span class="tel">${page} 133****0000</span>
              <span class="code">X102036178</span>
            </div>`
        }
       $(".swiper-wrapper").append(html)
      })
    }

虽然数据请求到了,但是显示一直有问题,总是在同几个slide进行滚动。反正就是显示不正常
后来认真的去看了下官网API,意外地发现了一个自带异步获取数据的API

mySwiper.appendSlide(html)
所有问题迎刃而解,轻松加愉快

相关文章

网友评论

      本文标题:利用swiper+AJAX 分页获取数据,实现文字滚动轮播

      本文链接:https://www.haomeiwen.com/subject/xhzsbctx.html