layui流加载、layui loading 加载中 无效果

解决方案简述

当遇到Layui的流加载或loading组件无效果的问题时，要确保正确引入了Layui的CSS和JS文件，并且按照官方文档的规范来编写代码。还需检查元素的选择器是否正确、事件绑定是否有效以及网络请求是否正常返回数据等。

一、检查资源引用

在页面头部使用<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-v2.8.3/dist/css/layui.css" rel="external nofollow" >引入Layui的样式文件，在页面底部（或者DOM元素加载之后）使用<script src="https://cdn.jsdelivr.net/npm/layui-v2.8.3/dist/layui.js"></script>引入Layui的脚件。
```html

```

二、流加载问题排查

1. 选择器准确性
   • 确保流加载的目标容器ID或类名没有拼写错误，例如：
     javascript
layui.use(['flow'], function(){
var flow = layui.flow;
flow.load({
elem: '#test-flow' //这里的#test-flow必须与HTML中的元素ID对应
,isLazyimg: true
,done: function(page, next){ //异步请求下一页
setTimeout(function(){
var lis = [];
for(var i=0; i<10; i++){
lis.push('<li class="animated fadeIn"><img src="//www.layui.com/res/images/demo.jpg?i='+ (page*10 + i) +'"></li>');
}
next(lis.join(''), page < 5); //假设总页数为5
}, 500);
}
});
});

   • 如果是通过类名选择，则要保证类名性或者符合预期选择规则。
2. 数据返回格式
   • 流加载的数据格式应该符合要求，例如上面示例中返回的是一个图片列表字符串。如果从服务器获取JSON数据，需要将其转换成合适的HTML结构再传递给next()函数。

三、loading加载中无效果处理

1. 正确初始化
   • 在使用loading组件之前，先初始化它。例如：
     javascript
layui.use(['layer'], function(){
var layer = layui.layer;
//显示加载层
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//模拟异步操作后关闭加载层
setTimeout(function(){
layer.close(index);
}, 2000);
});

   • 注意这里的layer.load()方法的个参数可以是1 - 3，表示不同的加载动画样式；第二个参数是一个对象，用于设置遮罩层样式等。
2. 检查元素可见性
   • 如果页面中有隐藏元素或者其他样式影响到了loading层的显示，可以通过浏览器开发者工具查看元素的实际样式，调整相关样式属性，如display、visibility等，确保loading层能够正常显示。

(www.nzw6.com)