uitscrollpicture

    概述 示例代码 可用性

    uitscrollpicture 小程序模块，封装了水平轮播视图功能，可实现自动或手动的轮播Banner图。本小程序模块基于UI模块引擎语法开发的,开发者可下载后直接使用或根据实际需要修改内部UI样式，完成该功能的二次开发。(本模块为公测版)

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

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

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

    • 注意事项

      • 调用处理

        可以在 uitscrollpicture 模块的内部设置相关参数，实现轮播图的默认显示。同时也可以通过 UITemplate.openView 的 data 参数传递给模块进行显示。

        data 中具体可设置参数如下：

        • list [Array]

          轮播视图的图片路径数组，数组内对象参数如下

          • 轮播图片的url路径，支持相对路径和网络路径, 必填

        • interval [Number]

          自动播放间隔时间 单位ms，默认3000

          • autoplay [Boolen]

            是否自动播放，默认 true，自动播放

          • indicator [Boolen]

            是否显示指示器，默认 true,显示指示器

          • circular: [Boolen]

            是否采用衔接滑动，默认 true

          • currentIndex [Number]

            初始化时显示的起始索引，默认 0

      • 数据交互

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

    3. var UITemplate = api.require("UITemplate");
    4. UITemplate.openView({
    5.     name: 'scrollpicture',
    6.     url: 'pages/uitscrollpicture/scrollpicture',
    7.     rect: {
    8.         marginTop: 0,
    9.         h: 'auto',
    10.         w: 'auto'
    12.     data: {  // 设置默认的初始化数据
    13.         list: [
    14.             {url: '../../../res/scrollpicture/banner_1@3x.png'},
    15.             {url: '../../../res/scrollpicture/banner_2@3x.png'},
    16.             {url: '../../../res/scrollpicture/banner_4@3x.png'}
    17.         ]
    18.     }
    19. },function(ret,err){
    21.         if ('itemChanged' == ret.type) {
    22.             // 执行视图切换逻辑代码
    23.             alert('当前索引值 index=='+ret.index)
    24.         }
    25.         else if ('itemClicked' == ret.key) {
    26.             // 执行视图点击逻辑代码
    27.             alert('当前索引值 index=='+ret.index)
    28.         }
    29.     }

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

    • 本模块支持使用UI模版引擎语法修改UI样式内容，语法说明文档地址

    • 可在 GitHub 上

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

    iOS系统，Android系统

    可提供的1.0.0及更高版本