uitsliderview

uitsliderview

来自于：APICloud立即使用

Method

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

概述

uitsliderview 小程序模块，封装了原生滑块功能，可实现滑动选择数值的交互逻辑。本小程序模块基于UI模块引擎语法开发的,开发者可下载后直接使用或根据实际需要修改内部UI样式，完成该功能的二次开发。(本模块为公测版)

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

下载本模块，解压后安置在UI模版引擎对应的 widget 目录中,并在app.json文件中添加本模块的相对路径地址
在引用页面，初始化 UITemplate 引擎模块
使用 UITemplate.openView 方法调用本模块。
注意事项
- 调用处理
  
  需要将 uitsliderview 的参数封装在 pageParam 参数对象中，然后将该对象通过 UITemplate.openView 的 data 参数传递给本模块进行显示。
  
  pageParam 中具体参数如下：
  - labelKey [String] 否 | 无 |
    
    slider 顶部左侧文字说明, 选填, 不填则不显示
  - unitName [String]
    
    slider 右侧数值的单位说明，不填则不显示
  - initValue [Number]
    
    slider 初始数值, 选填, 默认 0
  - step [Number]
    
    slider 滑动1单位的步长代表数值, 选填，默认1
  - value [Number]
    
    slider 滑块初始位置数值（0-100）, 选填，默认0
- 回调处理
  
  收到回调事件后，根据回调的参数事件类型，编写对应的代码逻辑
  
  回调参数 ret 内部子参数列表如下
  - type [String]
```
  回调事件类型参数
  valueChange 滑块值改变回调
```
  - value [Number]
    
    改变后的滑块位置数值（0-100）
  - realValue [Number]
    
    改变后的滑块计算数值，根据 value x step 获得
- 数据交互
  
  可以使用 UITemplate UI模块引擎的 setData 方法，对pageParam中的参数进行直接赋值，从而动态改变 uitsliderview 模块的显示逻辑。
```
  例如，对value 进行传值，从而实现动态改变滑块的位置
  UITemplate.setData({
      name: 'slider',
      data: {
          value: 60,
      }
  });
```

示例代码


// 前置步骤，需要先使用 init 方法初始化 UITemplate
var UITemplate = api.require("UITemplate");
UITemplate.openView({
    name: 'slider',
    url: 'pages/uitsliderview/sliderview',
    rect: {
        marginTop: 150,
        h: 'auto',
        w: 'auto'
    },
    data: {
        pageParam: {
            labelKey: '自动播放间隔时长',
            unitName: 'ms',
            initValue: 500,
            step: 50,
            value: 50
        }
    }
},function(ret,err){
    if (ret && 'valueChange' == ret.type) {
        alert('获取到的滑块数值'+ret.realValue);
    }
});

补充说明

需要先初始化 UITemplate 引擎模块后方可调用本模块
本模块支持使用UI模版引擎语法修改UI样式内容，语法说明文档地址
可在 GitHub 上下载本模块 DEMO 示例

示例地址: https://github.com/apicloudcom/UITemplateDEMO

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本