uitlistview

来自于：APICloud立即使用

概述 UI模版引擎调用本模块方法 示例代码 补充说明 可用性

概述

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

        1.   回调事件类型参数
        2.   pullDown 下拉事件回调
        3.   pullUp 上拉事件回调
        4.   cellClick 列表单元格点击事件

      • index

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

      • data

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

    • 数据交互

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

      1.   例如 
      2.   UITemplate.setData({
      3.       name: 'listview',
      4.       data: {
      5.           dataSource: newDataArr,
      6.       }
      7.   });

示例代码

  1. // 前置步骤，需要先使用 init 方法初始化 UITemplate
  3. var UITemplate = api.require("UITemplate");
  4. UITemplate.openView({
  5.     name: 'list',                     // 调用的小程序模块名称,自定义
  6.     url: 'pages/uitlistview/listview',   // 调用的小程序模块相对路径
  7.     rect: {                                 // 小程序模块的页面rect尺寸
  8.         marginTop: headerHeight,
  9.         h: 'auto',
  10.         w: 'auto'
  11.     },
  12.     data: {                                  //传入小程序模块的数据源
  13.         pageParam: [{
  14.             dataSource: {
  15.                 title: 'APICloud开发者大会，各路菁英齐聚，共讨AI时代的技术革新',
  16.                 type: '技术前沿',
  17.                 date: '2018-01-05',
  18.                 imgSrc: 'http://img2.imgtn.bdimg.com/it/u=3424226810,3788025634&fm=27&gp=0.jpg'
  19.             },
  20.             {
  21.                 title: 'APICloud开发者大会，各路菁英齐聚，共讨AI时代的技术革新',
  22.                 type: '技术前沿',
  23.                 date: '2018-01-05',
  24.                 imgSrc: 'http://img2.imgtn.bdimg.com/it/u=3424226810,3788025634&fm=27&gp=0.jpg'
  25.             }
  26.         }]
  27.     }
  28. },function(ret,err){            // 回调
  29.     if(ret){
  30.         console.log('UITemplate.openView callback=>ret:'+JSON.stringify(ret));
  31.         if( 'pullDown' == ret.type ) {  // 下拉刷新
  32.             fnListRefresh();  
  33.         }
  34.         else if( 'pullUp' == ret.type ) {  // 上拉加载
  35.             fnListAddMore();
  36.         }
  37.         else if( 'cellTouched' == ret.type ) {  // 单元格点击事件
  38.             WXUI().alert({
  39.                 title: 'APICloud温馨提示',
  40.                 msg: '列表单元'+ret.index+'被点击了'
  41.             });
  42.         }
  43.     }else{
  44.         console.log('UITemplate.openView callback=>err:'+JSON.stringify(err));
  45.     }
  46. });

补充说明

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本