首先上图;
使用官方文档的代码,有侧滑的功能,但我想实现点击一项,就能够打开一个页面,查看详细的信息,现在很多app也是这样设计的。因此研究了一下文档,最终成功了。
(1)首先是数据的问题,数据肯定不能写死,要从数据库动态获取然后一条一条的渲染在列表中,所以data属性就要动态获取。
//获取其他页面传过来的数据
var product = new Array();
product = api.pageParam.product;
//使用UIListView模块的数据赋值
for(var i = 0; i < product.length; i++) {
var item = {
uid: product[i].id, //标识号
imgPath: 'widget://image/'+product[i].img+'.png', //根据不同设备加载不同图片
title: product[i].name, //标题
subTitle: product[i].code, //条形码
born_time:product[i].born_time,//以下为自定义变量,可以在getDataByIndex中使用
position:product[i].position,
type:product[i].type,
owner:product[i].owner,
borrowed:product[i].borrowed,
repair:product[i].repair,
remark: '>', //备注
icon: ''
}
//赋值给数据数组
product[i] = item;
}
(2)点击其中一项打开页面,在回调函数中设置如果点击内容的话就执行 UIListView.getDataByIndex 函数,它可以通过你点击的项的索引来获取这个项所拥有的数据,前提是必须在data属性中定义过的,如果觉得属性值不够,可以自定义属性,添加自己想要的,然后在UIListView.getDataByIndex函数中就可以传递值给详情页面,从而得到的是设备详细的信息,
function list(product){
var UIListView = api.require('UIListView');
UIListView.open({
rect: {
x: 0,
y: 100,
w: api.winWidth,
h: api.frameHeight
},
data:product, //使用自己定义的数组
// data: [{
// uid: '1001',
// imgPath: 'widget://res/img/apicloud.png',
// title: product[0].name,
// subTitle: '子标题,说明文字',
// remark: '备注',
// icon: ''
// }],
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
if(ret.eventType == 'clickContent')
{
//根据返回的data的信息 再次发送ajax请求查询数据库 麻烦
//列表显示左滑模块
//根据列表项的索引获取对应的数据
UIListView.getDataByIndex({
//根据自定义的唯一标识(open 接口的 data 参数中自定义的唯一标识)查找列表项对应的数据
index: ret.index
}, function(ret, err) {
if (ret) {
//根据点击的索引,再次查询数据库
api.openWin({
name: 'top_menu',
url: './top_menu.html',
pageParam: {
product:ret.data//直接传递数组
}
});
} else {
alert(JSON.stringify(err));
}
});//getDataByIndex
}//eventType
} else {
alert(JSON.stringify(err));
}//open-function-if-else
});//open-function
}//list
下图是通过点击其中一项动态获取的数据, 把设备拥有的属性渲染到指定的位置上,这样就做好啦!