uitscrollpicture

来自于：APICloud立即使用

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

概述

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

图片说明

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

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

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

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

  • 注意事项

    • 调用处理

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

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

      • list [Array]

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

        • url [String]

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

      • interval [Number]

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

        • autoplay [Boolen]

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

        • indicator [Boolen]

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

        • circular: [Boolen]

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

        • currentIndex [Number]

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

    • 回调处理

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

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

      • type [String]

        1.   回调事件类型参数
        2.   itemChanged 轮播视图切换事件
        3.   itemClicked 视图点击事件

      • index [Number]

        当前视图索引数值，视图轮播事件或点击事件回调中返回

    • 数据交互

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

示例代码

  1. // 前置步骤，需要先使用 init 方法初始化 UITemplate
  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'
  11.     },
  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_3@3x.png'},
  17.             {url: '../../../res/scrollpicture/banner_4@3x.png'}
  18.         ]
  19.     }
  20. },function(ret,err){
  21.     if (ret) {
  22.         if ('itemChanged' == ret.type) {
  23.             // 执行视图切换逻辑代码
  24.             alert('当前索引值 index=='+ret.index)
  25.         }
  26.         else if ('itemClicked' == ret.key) {
  27.             // 执行视图点击逻辑代码
  28.             alert('当前索引值 index=='+ret.index)
  29.         }
  30.     }
  31. });

补充说明

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本