APICloud UIListView模块动态获取数据并查看详情使用

首先上图;

使用官方文档的代码，有侧滑的功能，但我想实现点击一项，就能够打开一个页面，查看详细的信息，现在很多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

下图是通过点击其中一项动态获取的数据， 把设备拥有的属性渲染到指定的位置上，这样就做好啦！