浏览文章
文章信息
Swiper 动态加载数据分页|上一页下一页
17379
代码:
<script> require(['jquery', 'swiper'], function ($, Swiper) { let pageSize = 8 let slidesPerColumn = 2; let slidesPerView = 4 let swiper = new Swiper('.swipper_content_id_best_sale_collection', { slidesPerColumnFill: 'column', slidesPerGroup: 4, observer: true, observeParents: true, spaceBetween: 20, slidesPerView: slidesPerView, slidesPerColumn: slidesPerColumn, parallax: true, pagination: { el: '#swipper_content_id_best_sale_collection-swiper-pagination', clickable: true, renderBullet: function (index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } }, effect: 'slide', navigation: { nextEl: '.swiper-container .swipper_content_id_best_sale_collectionswiper-button-next', prevEl: '.swiper-container .swipper_content_id_best_sale_collectionswiper-button-prev', }, on: { slideNextTransitionStart: function () { console.log(this)// 页码:已经有第一页,从后一页开始 let next_page = parseInt(this.slides.length / pageSize) if ((this.slides.length % pageSize) !== 0) { next_page += 1 } let cur_page_before_total = (this.activeIndex - 1) * 4 if ((this.slides.length - cur_page_before_total) < 32) { // 操作数据准备 let c_id = 4 let action = 'best_sale' $.ajax({ url: BASE_URL + 'rest/default/V1/aiweline/widget/three-category-top/' + c_id.toString() + '/' + action.toString() + '/' + pageSize.toString() + '/' + next_page.toString(), headers: { 'Content-Type': 'application/json', }, method: 'get', success: function (res) { // 渲染到swiper res = JSON.parse(res) console.log(res) if (res.length) { // 操作的swiperID res.forEach(function (product) { this.append("<div class=\"swiper-slide\"><a style=\"width: 100%;\" href=\"" + product.url + "\"><img style=\"width:100%\" src=\"" + product.image + "\" alt=\"" + product.name + "\"></a></div>") }) } }, error: function (err) { console.log(err) } }) } } }, }); }) </script>