LayPage组件实现分页,移动端页码切换时页面闪烁,求指点优化办法

提问 未结
14 176
枫芒
枫芒 2018-11-30
悬赏:20飞吻
版本:layui 2.4.5 浏览器:微信内置浏览器


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: "安敏修复天丝面膜"
}

];
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('');
}();
}
});
});

});
回帖
  • Zlheb
    2018-11-30
    移动端用这种分页方式吗?我之前有做过移动端的活动页面还有商品页面,用的分页是自己写的 滑动到快到底部的时候去刷新数据然后追加进去 并不是直接翻页 猜想你页面闪烁的原因是页面渲染的问题 如果分页是新的页面可能闪烁就很快 不糊太明显 如果是数据替换那闪烁效果就很清楚 因为替换的时候先将页面数据清空了 此时是白屏的 然后将数据在追加进去 此时又恢复正常 建议你用追加的方式或者直接新开一页
    0 回复
  • 枫芒
    2018-11-30
    @Zlheb 这里是在分页组件最后一个示例的基础上进行实现的,应该使用的是数据替换。
    0 回复
  • Zlheb
    2018-11-30
    @枫芒 移动端不适合用这种分页方式 最好用追加的方式
    0 回复
  • 枫芒
    2018-11-30
    @Zlheb 它是直接是把新数据拼接成的html代码通过innerHTML属性覆盖掉原来的。
    0 回复
  • 枫芒
    2018-11-30
    @Zlheb 他这个是点击页码跳转,但是显示的内容区域还是同一块,这种情况不是应该替换嘛?
    0 回复
  • 枫芒
    2018-11-30
    @枫芒 它是每次跳转获取跳转当前页的数据,拼接成html代码,然后在同一区域通过innerHTML重写内容,所以会出现页面闪烁吧?没有解决办法嘛?必须得换种实现方式?思路是怎样的呢?
    0 回复
  • 枫芒
    2018-11-30
    @Zlheb 它是每次跳转获取跳转当前页的数据,拼接成html代码,然后在同一区域通过innerHTML重写内容,所以会出现页面闪烁吧?没有解决办法嘛?必须得换种实现方式?思路是怎样的呢?
    0 回复
  • Zlheb
    2018-11-30
    @枫芒 用追加的方式 不要覆盖掉原来的内容 不然会出现闪烁而且还不能向上翻页 又得重新请求数据 直接用append
    0 回复
  • 枫芒
    2018-11-30
    @Zlheb 那跳转要怎么实现?对应div的显示隐藏?
    0 回复
  • Zlheb
    2018-11-30
    追加的方式就没有跳转了
    0 回复
  • 枫芒
    2018-11-30
    @Zlheb 那你的分页怎么实现的?不是分页跳转嘛?
    0 回复
  • 枫芒
    2018-11-30
    @Zlheb 不是的话那效果是啥样的?
    0 回复
  • 枫芒
    2018-11-30
    @Zlheb 大概是解决了。闪得这么厉害是因为innerHTML重写内容是先清空,后重写,清空的时候分页器上面的容器没设置最小高度,高度为0,重写后高度正常,这写入内容容器高度切换的过程导致下面的内容从上掉下来,所以闪得厉害。给上面容器一个最小高度差不多就解决啦。
    0 回复
  • Zlheb
    2018-11-30
    移动端的分页都是追加的 不是新开一页也不是替换掉当前页内容 目的就是速度快而且可以完美的向上翻页 分页是在无形中做的 快滑倒底部的时候加载下一页 上一页内容只需要往上滑不需要重新获取
    0 回复