uitswitchview

来自于：APICloud立即使用

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

概述

uitswitchview 小程序模块，封装了原生 switch 开关选择器功能，在实现开关状态的交互逻辑的基础上，集成显示左侧标签文字，右侧 开关按钮的列表视图样式。本小程序模块基于UI模块引擎语法开发的,开发者可下载后直接使用或根据实际需要修改内部UI样式，完成该功能的二次开发。(本模块为公测版)

图片说明

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

  • 下载本模块，解压后安置在UI模版引擎对应的 widget 目录中,并在app.json文件中添加本模块的相对路径地址

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

  • 使用 UITemplate.openView 方法调用本模块。

  • 注意事项

    • 调用处理

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

      pageParam 中具体参数如下：

      • dataSource [Array]

        数据源数组，可根据数据源组成多行的左文字右开关 UI 样式的列表

        • title [String] 否 | 无 |

          列表单元左侧文字说明, 选填, 不填则不显示

        • state [Boolen]

          列表单元右侧默认的开关状态, 选填, 默认值 false

        • key [String]

          多个单元时用于区分按钮开关回调事件的key, 必填

    • 回调处理

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

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

      • type [String]

        1.   回调事件类型参数
        2.   switchChange 开关状态改变回调

      • key [String]

        回调对应开关的 key 值, key 值为初始化调用本模块时传入的开关对应 key 值

      • status [Boolen]

        回调对应开关的状态

    • 数据交互

      可以使用 UITemplate UI模块引擎的 setData 方法，对pageParam中的参数进行直接赋值，从而动态改变 uitswitchview 模块的显示逻辑。

示例代码

  1. // 前置步骤，需要先使用 init 方法初始化 UITemplate
  2. var UITemplate = api.require("UITemplate");
  3. UITemplate.openView({
  4.     name: 'switch',
  5.     url: 'pages/uitswitchview/switchview',
  6.     rect: {
  7.         marginTop: 150,
  8.         h: 'auto',
  9.         w: 'auto'
  10.     },
  11.     data: {
  12.         pageParam: {
  13.             dataSource: [
  14.                 {
  15.                     title: '指示器',
  16.                     state: true,
  17.                     key: 'indicator'
  18.                 },
  19.                 {
  20.                     title: '自动播放',
  21.                     state: true,
  22.                     key: 'autoPlay'
  23.                 }]
  24.         }
  25.     }
  26. },function(ret,err){
  27.     if (ret && 'switchChange' == ret.type) {
  28.         if ('autoPlay' == ret.key) {
  29.             // 执行逻辑代码
  30.         }
  31.         else if ('indicator' == ret.key) {
  32.             // 执行逻辑代码
  33.         }
  34.     }
  35. });

补充说明

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本