浏览文章

文章信息

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>


原创