WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
流加载 - wui.flow 更多 flow 示例

该模块包含信息流加载图片懒加载两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了,但不妨现在开始,体验一下wui更为简单和高效的Flow吧。
模块加载名称:flow
flow模块包含两个核心方法,如下所示:
wui.use('flow', function(){
  var flow = wui.flow;
  //信息流
  flow.load(options);

  //图片懒加载
  flow.lazyimg(options);
});
下面将对她们进行详细介绍。 信息流即异步逐页渲染列表元素,这是你页面已经存在的一段列表,你页面初始时只显示了6个
<ul id="demo">
  <li>1</li>
  <li>2</li>
  ……
  <li>6</li>
</ul>
你想通过加载更多来显示余下列表,那么你只需要执行方法:flow.load(options) 即可
wui.use('flow', function(){
  var $ = wui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。
  var flow = wui.flow;
  flow.load({
    elem: '#demo' //指定列表容器
    ,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页
      var lis = [];
      //以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回)
      $.get('/api/list?page='+page, function(res){
        //假设你的列表返回在data集合中
        wui.each(res.data, function(index, item){
          lis.push('<li>'+ item.title +'</li>');
        });

        //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
        //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
        next(lis.join(''), page < res.pages);
      });
    }
  });
});
上述是一个比较简单的例子,以下是信息流完整的参数支撑(即options对象),它们将有助于你更灵活地应对各种场景
参数 类型 描述
elem string 指定列表容器的选择器
scrollElem string 滚动条所在元素选择器,默认document。如果你不是通过窗口滚动来触发流加载,而是页面中的某一个容器的滚动条,那么通过该参数指定即可。
isAuto boolean 是否自动加载。默认true。如果设为false,点会在列表底部生成一个“加载更多”的button,则只能点击它才会加载下一页数据。
end string 用于显示末页内容,可传入任意HTML字符。默认为:没有更多了
isLazyimg boolean 是否开启图片懒加载。默认false。如果设为true,则只会对在可视区域的图片进行按需加载。但与此同时,在拼接列表字符的时候,你不能给列表中的img元素赋值src,必须要用w-src取代,如:
wui.each(res.data, function(index, item){
  lis.push('<li><img w-src="'+ item.src +'"></li>');
});
            
mb number 与底部的临界距离,默认50。即当滚动条与底部产生该距离时,触发加载。注意:只有在isAuto为true时有效。
额,等等。。mb=margin-bottom,可不是骂人的呀。
done function 到达临界点触发加载的回调。信息流最重要的一个存在。携带两个参数:
done: function(page, next){
  //请注意:wui 1.0.5 之前的版本是从第2页开始返回,也就是说你的第一页数据并非done来触发加载
  (为之前这个愚蠢的设计表示抱歉)
  //从 wui 1.0.5 的版本开始,page是从1开始返回,初始时即会执行一次done回调。
  //console.log(page) //获得当前页

  //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
  //只有当前页小于总页数的情况下,才会继续出现加载更多
  next('列表HTML片段', page < res.pages);
}
            
应该说比当前市面上任何一个懒加载的实现都更为强劲和轻量,她用不足80行代码巧妙地提供了一个始终加载当前屏图片的高性能方案(无论上滑还是下滑)。对你的网站因为图片可能带来的压力,可做出很好的应对。
语法:flow.lazyimg(options)
wui.use('flow', function(){
  var flow = wui.flow;
  //当你执行这样一个方法时,即对页面中的全部带有w-src的img元素开启了懒加载(当然你也可以指定相关img)
  flow.lazyimg();
});
如上所述,它只会针对以下img元素有效:
<img w-src="aaa.jpg">
<img src="bbb.jpg" alt="该图不会懒加载">
<img w-src="ccc.jpg">
图片懒加载的使用极其简单,其参数(options对象)可支持的key如下表所示:
参数 类型 描述
elem string 指定开启懒加载的img元素选择器,如 elem: '.demo img' 或 elem: 'img.load'
scrollElem string 滚动条所在元素选择器,默认document。如果你不是通过窗口滚动来触发流加载,而是页面中的某一个容器的滚动条,那么通过该参数指定即可。
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile