uitscollsegmentbar

    概述 示例代码 可用性

    uitscollsegmentbar 小程序模块，封装了可水平滚动的分段条功能。可实现水平滑动分段条及点击动态条回调交互的业务逻辑。本小程序模块基于UI模块引擎语法开发的,开发者可下载后直接使用或根据实际需要修改内部UI样式，完成该功能的二次开发。(本模块为公测版)

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

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

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

    • 注意事项

      • 调用处理

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

        • dataSource [Array]

          标签名称的数据源数组, 如 [‘tag1’,’tag2’,’tag3’]

        • selectedIndex

          默认选中的分段索引值

      • 回调处理

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

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

        • type [String]

          回调事件类型参数

      • 数据交互

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

    2. // 前置步骤，需要先使用 init 方法初始化 UITemplate
    4. var UITemplate = api.require("UITemplate");
    5. UITemplate.openView({
    6.     name: 'scrollsegmentbar',
    7.     url: 'pages/uitscrollsegmentbar/scrollsegmentbar',
    8.     rect: {
    9.         marginTop: headerHeight,
    11.         w: 'auto'
    12.     },
    13.     data: {
    14.         pageParam: {
    15.             selectedIndex: 0                      // 默认起始分段条的索引值
    16.         }
    17.     }
    19.     console.log('UITemplate.openView[scrollsegmentbar] callback=>ret:'+JSON.stringify(ret));
    20.     console.log('UITemplate.openView[scrollsegmentbar] callback=>err:'+JSON.stringify(err));
    21.     if(ret && 'unitClick' == ret.type ){
    22.         alert( '索引值'+ret.index+'的分段条被点击了');
    23.     }else{
    25.     }
    26. });

    • 需要先初始化 UITemplate 引擎模块后方可调用本模块

    • 本模块支持使用UI模版引擎语法修改UI样式内容，

    • 可在 GitHub 上 下载本模块 DEMO 示例

      示例地址:

    iOS系统，Android系统