Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
build
1.html
2.html
3.html
4.html
5.html
README.md
jroll-infinite.js

README.md

JRoll无限加载组件

说明

JRoll的无限加载组件jroll-infinite.js,依赖JRoll2,必须要先加载jroll.js。为了不占用太多的全局变量,该组件以JRoll原型链的一个方法形式存在,只要运行过jroll-infinite.js即可给JRoll的实例调用。

引入

普通方式引入

<script src="jroll.js"></script>
<script src="jroll-infinite.js"></script>

CommonJS规范引入

var JRoll = require('jroll.js');
require('jroll-infinite.js'); //不需要赋给变量,运行就好了

var jroll = new JRoll("#wrapper");
jroll.infinite(); //使能无限加载,具体配置详见下文

AMD规范引入(requireJS)

//配置jroll-infinite依赖jroll
require.config({
    baseUrl: './',
    paths: {
        'jroll-infinite': 'js/jroll-infinite'
    }
    shim: {
        'jroll-infinite': {
            deps: ['jroll'] //jroll.js的路径
        }
    }
});

define(['jroll-infinite'], function(JRoll) {
    //jroll-infinite将会返回JRoll,因此不需要单独引入jroll.js
    var jroll = new JRoll("#wrapper");
    jroll.infinite(); //使能无限加载,具体配置详见下文
});

使用

创建JRoll实例,调用infinite方法使能下拉刷新

var jroll = new JRoll("#wrapper");
jroll.infinite({
    template: "<div>{{=_obj.title}}</div>",
    getData: function(page, callback, errorCallback) {
        //完成加载数据的操作后回调执行callback方法
        ajax({
        	url: "getData.do?page=" + page,
        	success: function(data) {
        	    callback(data);
        	},
            error: function() {
                errorCallback(); // 将会显示错误提示信息
            }
        });
    }
});

选项

选项 默认值 必填 说明
total 99 N 总页数
getData null Y 获取后端数据
hideImg false N 开启之后,不在屏幕上的图片会display:none,可降低内存的使用,适合多图片的场景。注意,隐藏图片后会影响页面高度,因此图片的宽高应设为100%,由它们的父元素来控制图片的宽高
blank false N 开启之后,不在屏幕上的页面会display:none,可降低内存的使用,hideImg只会隐藏图片,而blank会隐藏整个分页的内容
template "" Y 每条数据的模板,模板里div等元素标签的属性不能省略引号
loadingTip <div class="jroll-infinite-tip">正在加载...</div> N 正在加载提示信息
completeTip <div class="jroll-infinite-tip">已加载全部内容</div> N 加载完成提示信息
errorTip <div class="jroll-infinite-tip">加载失败,上拉重试!</div> N 加载完成提示信息
root "_obj" N 给内置模板引擎指定根数据变量
compile [自带的编译方法] N 编译方法
render [自带的渲染方法] N 渲染方法

模板

简介

JRoll-Infinite默认使用内置的模板引擎

  • 优点:比以渲染速度著称的前端模板引擎——artTemplate,还要快。可传入任意类型的数据变量,artTemplate和underscore只能传入json对象。
  • 缺点:不能省略传入的数据对象,语法比较严格。

最新的artTemplate和underscore模板引擎都使用了预编译的方式进行模板渲染,即预先创建一个传入数据对象返回渲染内容的函数。这种方式对于重复使用模板有明显的速度提升。artTemplate使用正则将所有可能出现的变量提前声明,实现限定对象作用域的假象,这种方法很难避免带来冗余的变量。underscore使用with语句限定对象作用域,性能损耗严重,js严格模式已去除了with语句。JRoll-Infinite的模板引擎使用_obj变量(默认为_obj,可自定义)指向数据对象,摒弃以上两种限定对象作用域的方法,因此会更快。

语法

<script>
//传入模板的数据对象
var data = {
        list:[1,2,null],
        text: "hello world!!!"
    };
</script>
<!-- 模板 -->
<ul>
    {{each _obj.list as li i}}
        {{if li === 1}}
        <li>{{=i}}、{{=li}}</li>
        {{else if li === 2}}
        <li>{{=li}}</li>
        {{else}}
        <li>game over!</li>
        {{/if}}
    {{/each}}
</ul>
{{console.log(_obj.text)}}
  • 循环 使用{{each list as li i}}{{/each}}标签,格式固定,list是数组,li是子元素,i是变量,解释成for(var i = 0,li;i < list.length; i++){li=list[i];}。
  • 判断 使用{{if bool === true}}{{/if}},解释成if(bool === true){}。
  • 输出 使用{{=}}。
  • 运行 使用{{}}添加分号并运行语句,如alert("yes")解释成alert("yes");。

使用第三方模板

  • 使用artTemplate模板,重写compile
var jroll = new JRoll("#wrapper");
jroll.infinite({
    getData : function(page, callback, errorCallback){...},
    compile: function(text) {
        return template.compile(text);
    },
    template: "<div class='item'>{{index}}、{{text}}</div>"
});
  • 使用underscore模板,重写compile
var jroll = new JRoll("#wrapper");
jroll.infinite({
    getData : function(page, callback, errorCallback){...},
    compile: function(text) {
        return _.template(text);
    },
    template: "<div class='item'><%=index%>、<%=text%></div>"
});

使用技巧

  • 动态修改总页数

遇到搜索、分类筛选等功能时,总页数因后台返回的数据而改变的情况下需要修改总页数

var jroll = new JRoll("#wrapper");
jroll.infinite({
    getData: function(page, callback, errorCallback) {
        $.ajax({
            url : "getdata.php?page="+page+"&filter=a",
            success : function(data) {
                jroll.options.total = data.total;
                callback(data.items);
            }
        });
    },
    template : "..."
});
  • 使用infinite_callback方法手动更新数据

遇到搜索、分类筛选等功能时,不能通过下拉刷新去更新数据,此时可手动执行infinite_callback或infinite_error_callback方法。

var condition, jroll;
condition = {
    filter : "a",
    page : 1
};
function search(){
    condition.filter = "b"; //修改搜索条件
    condition.page = jroll.options.page = 1; //重置第1页
    jroll.scroller.innerHTML = "";    //清空内容
    jroll.scrollTo(0, 0);  //滚回顶部
    //执行刷新数据方法
    $.ajax({
        url : "getdata.php",
        data : condition,
        type : "POST",
        success : function(data) {
            jroll.options.total = data.total;
            jroll.infinite_callback(data.items);
        },
        error: function() {
            jroll.infinite_error_callback()
        }
    });
}
jroll = new JRoll("#wrapper");
jroll.infinite({
    getData: function(page, callback, errorCallback) {
        condition.page = page;
        $.ajax({
            url : "getdata.php",
            data : condition,
            type : "POST",
            success : function(data) {
                jroll.options.total = data.total;
                callback(data.items);
            },
            error: function() {
                errorCallback()
            }
        });
    },
    template : "..."
});
search(); //执行搜索方法更新数据

更新日志

v2.2.0 (2017-07-19)

  • 添加错误处理提示errorTip选项及错误处理回调errorCallback

v2.1.4 (2017-05-03)

  • Fixed Issue 21:修复在IOS上大量图片时闪屏的问题

v2.1.3 (2016-12-29)

  • 非hideImg或blank选项不固定page的高度

v2.1.2 (2016-12-05)

  • 修复同步获取数据并执行callback时没过滤tip提示的bug

v2.1.1 (2016-11-26)

  • 修复动态修改options.total的bug

v2.1.0 (2016-07-30)

  • 完成发布