uitscollsegmentbar

来自于:APICloud立即使用

概述

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

图片说明

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

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

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

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

  • 注意事项

    • 调用处理

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

      pageParam 中具体参数如下:

      • dataSource [Array]

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

      • selectedIndex

        默认选中的分段索引值

    • 回调处理

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

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

      • type [String]

        回调事件类型参数

        事件类型名称 | 参数说明 --- | --- unitClick | 分段条点击事件

      • index [Number]

        当前被选中的分段索引值

    • 数据交互

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

        例如
        UITemplate.setData({
            name: 'scrollsegmentbar',
            data: {
                selectedIndex: pIndex
            }
        });
      

示例代码


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

var UITemplate = api.require("UITemplate");
UITemplate.openView({
    name: 'scrollsegmentbar',
    url: 'pages/uitscrollsegmentbar/scrollsegmentbar',
    rect: {
        marginTop: headerHeight,
        h: 48,
        w: 'auto'
    },
    data: {
        pageParam: {
            dataSource: ['tag1','tag2','tag3'],   // 分段条的显示名称
            selectedIndex: 0                      // 默认起始分段条的索引值
        }
    }
},function(ret,err){
    console.log('UITemplate.openView[scrollsegmentbar] callback=>ret:'+JSON.stringify(ret));
    console.log('UITemplate.openView[scrollsegmentbar] callback=>err:'+JSON.stringify(err));
    if(ret && 'unitClick' == ret.type ){
        alert( '索引值'+ret.index+'的分段条被点击了');
    }else{

    }
});

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本