uitlistview

来自于:APICloud立即使用

概述

uitlistview 列表功能的小程序模块,可显示列表样式的视图组件。本小程序模块基于UI模块引擎语法开发的,开发者可下载后直接使用或根据实际需要修改内部UI样式,完成该功能的二次开发。(本模块为公测版)

图片说明

UI模版引擎调用本模块方法

  • 下载本模块,解压后安置在UI模版引擎对应的 widget 目录中

  • 在引用页面,初始化 UITemplate 引擎模块

  • 使用 UITemplate.openView 方法引用本模块即可。

  • 注意事项

    • 调用处理

      需要将 sheet 的参数封装在 pageParam 参数对象中,然后将该对象通过 UITemplate.openView 的 data 参数传递给本模块进行显示。

      pageParam 中具体参数如下:

      • dataSource [Array]

        列表数据源对象,必填,可根据列表单元中的具体数据结构组成数据单元对象

      • title [String]

        列表单元标题文字描述, 必填

      • type [String]

        列表单元类型文字描述, 选填, 不填则不显示

      • date [String]

        列表单元时间文字描述,如2018-01-05, 选填, 不填则不显示

      • imgSrc [String]

        列表单元图片路径, 必填

    • 回调处理

      收到回调事件后,根据回调的参数事件类型,编写对应的代码逻辑

      回调参数 ret 内部子参数列表如下

      • type

          回调事件类型参数
          pullDown 下拉事件回调
          pullUp 上拉事件回调
          cellClick 列表单元格点击事件
        
      • index

        点击的单元格索引值,cellClick 列表单元格点击事件 回调中返回

      • data

        点击的单元格对应数据对象, cellClick 列表单元格点击事件 回调中返回

    • 数据交互

      可以使用 UITemplate UI模块引擎的 setData 方法,对 dataSource 进行传值,从而实现数据加载显示和刷新显示业务逻辑的实现

        例如 
        UITemplate.setData({
            name: 'listview',
            data: {
                dataSource: newDataArr,
            }
        });
      

示例代码

// 前置步骤,需要先使用 init 方法初始化 UITemplate

var UITemplate = api.require("UITemplate");
UITemplate.openView({
    name: 'list',                     // 调用的小程序模块名称,自定义
    url: 'pages/uitlistview/listview',   // 调用的小程序模块相对路径
    rect: {                                 // 小程序模块的页面rect尺寸
        marginTop: headerHeight,
        h: 'auto',
        w: 'auto'
    },
    data: {                                  //传入小程序模块的数据源
        pageParam: [{
            dataSource: {
                title: 'APICloud开发者大会,各路菁英齐聚,共讨AI时代的技术革新',
                type: '技术前沿',
                date: '2018-01-05',
                imgSrc: 'http://img2.imgtn.bdimg.com/it/u=3424226810,3788025634&fm=27&gp=0.jpg'
            },
            {
                title: 'APICloud开发者大会,各路菁英齐聚,共讨AI时代的技术革新',
                type: '技术前沿',
                date: '2018-01-05',
                imgSrc: 'http://img2.imgtn.bdimg.com/it/u=3424226810,3788025634&fm=27&gp=0.jpg'
            }
        }]
    }
},function(ret,err){            // 回调
    if(ret){
        console.log('UITemplate.openView callback=>ret:'+JSON.stringify(ret));
        if( 'pullDown' == ret.type ) {  // 下拉刷新
            fnListRefresh();  
        }
        else if( 'pullUp' == ret.type ) {  // 上拉加载
            fnListAddMore();
        }
        else if( 'cellTouched' == ret.type ) {  // 单元格点击事件
            WXUI().alert({
                title: 'APICloud温馨提示',
                msg: '列表单元'+ret.index+'被点击了'
            });
        }
    }else{
        console.log('UITemplate.openView callback=>err:'+JSON.stringify(err));
    }
});

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本