mirror of
https://gitee.com/layui/layui.git
synced 2025-10-26 18:59:15 +08:00
Add docs
This commit is contained in:
贤心
61
docs/flow/detail/demo.md
Normal file
61
docs/flow/detail/demo.md
Normal file
@@ -0,0 +1,61 @@
|
||||
<h3 lay-toc="{id: 'examples', level: 2}" class="layui-hide">滚动加载</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '滚动加载'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="flow-demo" id="ID-flow-demo"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var flow = layui.flow;
|
||||
|
||||
// 流加载实例
|
||||
flow.load({
|
||||
elem: '#ID-flow-demo', // 流加载容器
|
||||
scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
|
||||
done: function(page, next){ // 执行下一页的回调
|
||||
// 模拟数据插入
|
||||
setTimeout(function(){
|
||||
var lis = [];
|
||||
for(var i = 0; i < 8; i++){
|
||||
lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
|
||||
}
|
||||
|
||||
// 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||||
// pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
|
||||
next(lis.join(''), page < 10); // 此处假设总页数为 10
|
||||
}, 520);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-manual-load" lay-toc="{level: 2}">手动加载</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="flow-demo" id="ID-flow-demo-manual"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var flow = layui.flow;
|
||||
// 流加载实例
|
||||
flow.load({
|
||||
elem: '#ID-flow-demo-manual', // 流加载容器
|
||||
scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
|
||||
isAuto: false,
|
||||
isLazyimg: true,
|
||||
done: function(page, next){ // 加载下一页
|
||||
// 模拟插入
|
||||
setTimeout(function(){
|
||||
var lis = [];
|
||||
for(var i = 0; i < 6; i++){
|
||||
lis.push('<li><img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
|
||||
}
|
||||
next(lis.join(''), page < 6); // 假设总页数为 6
|
||||
}, 520);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
128
docs/flow/detail/options.md
Normal file
128
docs/flow/detail/options.md
Normal file
@@ -0,0 +1,128 @@
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="100">
|
||||
<col width="100">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性名</th>
|
||||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>elem</td>
|
||||
<td>
|
||||
|
||||
绑定元素选择器或 DOM 对象
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scrollElem</td>
|
||||
<td>
|
||||
|
||||
指定触发流加载的滚动条所在元素选择器。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`document`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isAuto</td>
|
||||
<td>
|
||||
|
||||
是否自动加载。 若设为 `false`，则会在列表底部生成一个「加载更多」的按钮，那么可点击该按钮加载下一页数据。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>end</td>
|
||||
<td>
|
||||
|
||||
设置加载完毕后的最尾部的内容，可传入任意 HTML 字符。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
<code style="font-size: 13px;">没有更多了</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isLazyimg</td>
|
||||
<td>
|
||||
|
||||
是否开启信息流中的图片懒加载。若设为 `true` ，则只会对在可视区域的图片进行按需加载。但同时，在拼接列表字符的时候，您不能给列表中的 `<img>` 标签赋值 `src`，必须要用 `lay-src` 属性取代，如：
|
||||
|
||||
```
|
||||
layui.each(data, function(index, item){
|
||||
lis.push('<li><img lay-src="'+ item.src +'"></li>');
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mb</td>
|
||||
<td>
|
||||
|
||||
与底部的临界距离。 即当滚动条与底部产生该距离时，触发加载。 必须 `isAuto:true` 时有效。
|
||||
|
||||
*小贴士*： 此处 `mb` 属性名是 css 中 `margin-bottom` 的简写，可并非国粹之语 😅
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`50`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>done</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.done" class="ws-anchor">
|
||||
滚动条到达临界点触发加载的回调函数。函数返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
done: function(page, next){
|
||||
console.log(page) // 获得当前页
|
||||
|
||||
// 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||||
// 只有当前页小于总页数的情况下，才会继续出现加载更多
|
||||
next('列表 HTML 片段', page < res.pages);
|
||||
}
|
||||
```
|
||||
|
||||
详细用法可参考：[#示例](#examples)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
90
docs/flow/index.md
Normal file
90
docs/flow/index.md
Normal file
@@ -0,0 +1,90 @@
|
||||
---
|
||||
title: 流加载 flow
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 流加载
|
||||
|
||||
> 流加载 `flow` 是用于在*信息流*和*图片列表*场景中的滚动按需加载，对前后端的体验和性能优化具有一定帮助。
|
||||
|
||||
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<style>
|
||||
.flow-demo{height: 400px; overflow: auto; font-size: 0;}
|
||||
.flow-demo li{display: inline-block; margin: 0 5px; font-size: 14px; width: 48%; margin-bottom: 10px; height: 100px; line-height: 100px; text-align: center; background-color: #eee;}
|
||||
.flow-demo img{width: 100%; height: 100%;}
|
||||
.flow-demo-lazyimg{height: 300px; overflow: auto; text-align: center;}
|
||||
.flow-demo-lazyimg img{width: 40%; height: 200px; margin: 0 3px 5px 0; border: none;}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/flow/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var flow = layui.flow | 获得 `flow` 模块。 |
|
||||
| [flow.load(options)](#load) | 信息流加载，核心方法。 |
|
||||
| [flow.lazyimg(options)](#lazyimg) | 图片懒加载。 |
|
||||
|
||||
<h2 id="load" lay-toc="{level: 2}">信息流</h2>
|
||||
|
||||
`flow.load(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
信息流是分页的另一种表现形式，新加载的内容不替换原有的内容，而是随着滚动条滚动而追加显示。[#详见示例](#examples)
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/flow/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="lazyimg" lay-toc="{level: 2}">图片懒加载</h2>
|
||||
|
||||
`flow.lazyimg(options);`
|
||||
|
||||
- 参数 `options` : 属性配置项。可选项见下表。
|
||||
|
||||
| 属性名 | 描述 |
|
||||
| --- | --- |
|
||||
| elem | 绑定容器中需进行懒加载的图片元素选择器 |
|
||||
| scrollElem | 滚动条所在元素选择器，默认 `document` 。 |
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="flow-demo-lazyimg" id="ID-flow-demo-lazyimg">
|
||||
<!-- <img src="占位图地址" lay-src="图片实际地址"> -->
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
|
||||
</div>
|
||||
<script>
|
||||
layui.use('flow', function(){
|
||||
var flow = layui.flow;
|
||||
// 图片懒加载
|
||||
flow.lazyimg({
|
||||
elem: '#ID-flow-demo-lazyimg img',
|
||||
scrollElem: '#ID-flow-demo-lazyimg' // 一般不用设置，此处只是演示需要。
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
无论滚动条上滑还是下滑，都会始终加载当前屏的图片。
|
||||
|
||||
Reference in New Issue
Block a user