xpage.js 文档

更新

    var xpage = XHW.Xpage({
        nid: 11145727, // 栏目id
        onData: function(data){
            console.log(data); //data是获取的json原始值
        }
    }); 

说明

xpage.js 是一款用于翔的通用分页组件，内置多种分页加载交互逻辑。不同于 Swiper，xpage 没有对页面结构做要求，更没有内置样式文件，一切列表渲染的逻辑交给使用者去实现，实现了数据层 （ model ）和展示层 ( view ) 的分离。本文档介绍了 xpage 的基本用法和一些有意思的‘扩展’用法。

用法

引入Xpage

<script src="http://www.xinhuanet.com/global/lib/xpage/xpage.min.js"></script>

Xpage构造函数被置于命名空间 XHW.Xpage 中，避免变量污染

实例化 Xpage

var xpage = new XHW.Xpage(container,options)

其中 container 为列表容器，组件内部通过 $(container) 的方式调用，所以可取 jquery 接受的选择器类型。 options 为组件参数。

参数[options]

xpage可以实现不同的加载交互模式，不同模式有共有的参数配置，也有独立的参数配置，

{
    isEmpty: '暂无数据',
    isHasMore: '查看更多',
    isLoading: '加载中……',
    isError: '加载失败，请重试',
    isNoMore: '暂无更多'
}
                            

{
    isEmpty: '暂无数据',
    isHasMore: '滚动加载',
    isLoading: '加载中……',
    isError: '加载失败，请重试',
    isNoMore: '暂无更多'
}
                            

{
    first: '<<',
    last: '>>',
    pre: '<',
    next: '>'
}
                            

实例方法

renderItem

item参数

用于单条列表渲染的数据，格式如下：

{
    "DocID":"1121349057",
    "Title":"《建军大业》发布会 刘伟强：拍电影好看最重要。",
    "NodeId":"11145727",
    "PubTime":"2017-07-20 09:20:24",
    "LinkUrl":"http://m.news.cn/ent/2017-07/20/c_1121349057.htm",
    "Abstract":null,
    "keyword":null,
    "Editor":"张璐",
    "Author":null,
    "IsLink":"0",
    "SourceName":"新华网",
    "PicLinks":"1121349057_1500511948467_title.jpg"
    ,"IsMoreImg":"0",
    "imgarray":[],
    "SubTitle":null,
    "Attr":61,
    "m4v":null,
    tarray":[],
    "uarray":[],
    "allPics":["http://m.xinhuanet.com/titlepic/112134/1121349057_1500511948467_title0h.jpg"],
    "IntroTitle":"影视"
}
                

item 常用取值片段

index参数

list 参数

当前页 json 数据集合，每次调用 renderItem 时除了访问当前项数据 item，也可访问全部数据 list ，接口 v1.0 格式如下：

[{"DocID":"1121349057",
  "Title":"《建军大业》发布会 刘伟强：拍电影好看最重要。",
  "NodeId":"11145727",
  "PubTime":"2017-07-20 09:20:24","LinkUrl":"http://m.news.cn/ent/2017-07/20/c_1121349057.htm",
  "Abstract":null,
  "keyword":null,
  "Editor":"张璐",
  "Author":null,
  "IsLink":"0",
  "SourceName":"新华网",
  "PicLinks":"1121349057_1500511948467_title.jpg"
  ,"IsMoreImg":"0",
  "imgarray":[],
  "SubTitle":null,
  "Attr":61,
  "m4v":null,
  tarray":[],
  "uarray":[],
  "allPics":["http://m.xinhuanet.com/titlepic/112134/1121349057_1500511948467_title0h.jpg"],
  "IntroTitle":"影视"
},{"DocID":"1121348669",
  "Title":"《锋味》爆新玩法 谢霆锋重金找大厨上演美食PK",
  "NodeId":"11145727","PubTime":"2017-07-20 08:28:24","LinkUrl":"http://m.news.cn/ent/2017-07/20/c_1121348669.htm",
  ...
},{
  ...
}]
                

[
    {
        "DocID": 136514349,
        "Title": "Peng Shuai, Sania Mirza advance to women's doubles quarterfinals",
        "NodeId": 11142121,
        "PubTime": "2017-08-10 09:30:03",
        "LinkUrl": "http://news.xinhuanet.com/english/2017-08/10/c_136514349.htm",
        "Abstract": "Peng Shuai (R) of China and Sania Mirza of India celebrate victory after the second round of women's doung",
        "keyword": "Rogers Cup",
        "Editor": "Yang Yi",
        "Author": "Zou Zheng",
        "IsLink": 0,
        "SourceName": "Source: Xinhua",
        "PicLinks": "http://www.xinhuanet.com/english/titlepic/13651/136514349_1312341013_title0h.jpg",
        "IsMoreImg": 0,
        "imgarray": [],
        "SubTitle": null,
        "Attr": 63,
        "m4v": null,
        "tarray": [],
        "uarray": [],
        "allPics": ["http://www.xinhuanet.com/english/titlepic/13651/136514349_1312341013_title0h.jpg"],
        "IntroTitle": null,
        "Ext1": null
        "Ext2": null,
        "Ext3": null,
        "Ext4": null,
        "Ext5": null,
        "Ext6": null,
        "Ext7": null,
        "Ext8": null,
        "Ext9": null,
        "Ext10": null
    },{
        ...
    }
]               
                

分析

结合item,index,list可精细化定制每条数据的渲染，比如通过判断index的奇偶性实现奇偶不同的渲染效果；判断 index/4 的取值实现4个一组的分组渲染；通过 list 在每次渲染时获取额外的数据加成...等等。

其他

图文列表

图像查看器