Mobile page, the paging component of LayUI is used to achieve paging, and the function has been realized. Now the mobile page flashes fiercely when it jumps, so ask for advice on the solution.
related codes
the html code is as follows:
<div class="series_products">
<ul id="products_list"></ul>
<div id="demo3" class="layPage"></div>
</div>
js code is as follows:
`/ / Local test data
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: "-sharpff8874",
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 +
"" +
"</a></li>");
});
return arr.join("");
}();
}
});
});
`