layui移动开发_LayUI分页组件实现分页, 移动端页码跳转页面出现闪烁,求优化办法。...

在移动端页面中,使用LayUI分页组件遇到页面跳转时的闪烁现象。文章探讨如何解决这个问题,提供了相关的HTML和JS代码片段,并寻求针对LayUI分页在移动端优化的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

移动端页面,使用LayUI的分页组件实现了分页,功能已经实现,现在就是移动端页面跳转时闪烁得厉害,求大神指点解决办法。

相关代码

html代码如下:

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: '<',

next: '>',

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('

' +

'

' +

'

' +

item.name +

'

' +

'

');

});

return arr.join('');

}();

}

});

});

`

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值