LayUI分页组件实现分页, 移动端页码跳转页面出现闪烁,求优化办法。

html:

   <div class="series_products">
                    <ul id="products_list"></ul>
                    <div id="demo3" class="layPage"></div>
                </div>

js:

var data = [{
                href: "javascript:;",
                src: "images/img7.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img8.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img9.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img10.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img11.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img12.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img12.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img11.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img10.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img9.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img8.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img7.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img12.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img11.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img10.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img9.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img8.jpg",
                name: "安敏修复天丝面膜"
            },
            {
                href: "javascript:;",
                src: "images/img7.jpg",
                name: "安敏修复天丝面膜"
            },
           
        ];
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage,
                layer = layui.layer;
            //自定义首页、尾页、上一页、下一页文本
            laypage.render({
                elem: 'demo3',
                count: data.length,
                limit: 6,
                groups: 4,
                theme: '#ff8874',
                first: '首页',
                last: '尾页',
                layout: ['prev', 'page', 'next'],
                prev: '<em><</em>',
                next: '<em>></em>',
                jump: function (obj) {
                    //模拟渲染
                    document.getElementById('products_list').innerHTML = function () {
                        var arr = [],
                            // 截取返回数据组中当前跳转页的数据--.concat()返回数组的浅拷贝
                            thisData = data.concat().splice(obj.curr * obj.limit -
                                obj.limit, obj.limit);
                        //thisData为当前跳转页的数据数组 
                        layui.each(thisData, function (index, item) {
                            arr.push('<li><a class="aLink"  href="' +
                                item.href +
                                '"/>' +
                                '<div class="products_pic"><img src="' +
                                item.src +
                                '"/></div>' +
                                '<p class="products_name">' +
                                item.name +
                                '</p>' +
                                '</a></li>');
                        });
                        return arr.join('');
                    }();
                }
            });
        });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值