清泛IT社区

标题: 图片轮播拓展 - ColinTreeSlideShow [打印本页]

---

作者: App Inventor 2     时间: 2024-06-17 19:51
标题: 图片轮播拓展 - ColinTreeSlideShow

图片轮播，一“件”搞定！

• 2017.9.24更新（v2）
  
  
  • 融合了新组件AsyncImageLoader，现在直接加载在线图片也不会卡啦
  • GitHub Release
    
• 2017.9.17发布第一版本
  
  
  • GitHub Release
    
  
  

基本使用流程

• 为该组件预留一个空的 水平滚动布局，将宽高设置好
  （目前组件有个问题，在加入图片之后调整这个布局，图片不会跟随改变大小）
  如图（背景颜色可以先设置好）：
  (, 下载次数: 18079)

  上传

  点击文件名下载附件
  下载积分: 经验 1
• 在添加列表项之前先初始化一下，调用传入一个参数：
  调用ColinTreeSlideShow1 ▾.RegisterScrollViewhorizontalScrollArrangement
• 给轮播添加图片：
  调用ColinTreeSlideShow1 ▾.AddPhotopath
  

事件

• 自动轮播开始滚动当ColinTreeSlideShow1 ▾.AutoSwipe执行
• 自动轮播滚动结束当ColinTreeSlideShow1 ▾.AutoSwiped执行
• 图片被点击当ColinTreeSlideShow1 ▾.SlideClick slideIndex 执行
• 轮播开始滚动当ColinTreeSlideShow1 ▾.Swipe执行
• 轮播滚动结束当ColinTreeSlideShow1 ▾.Swiped执行
• 图片加载完毕 - ImageLoaded (v2新增)当ColinTreeSlideShow1 ▾.ImageLoaded执行
• 图片加载失败 - ImageLoadFailed (v2新增)当ColinTreeSlideShow1 ▾.ImageLoadFailed执行
  

方法

• 添加（追加）图片调用ColinTreeSlideShow1 ▾.AddPhotopath
• 正在播放第一张图片调用ColinTreeSlideShow1 ▾.AtFirstSlide
• 正在播放最后一张图片调用ColinTreeSlideShow1 ▾.AtLastSlide
• 更换图片调用ColinTreeSlideShow1 ▾.ChangePhotoslideIndexpath
• 前往第一张图调用ColinTreeSlideShow1 ▾.GoFirstSlide
• 前往最后一张图调用ColinTreeSlideShow1 ▾.GoLastSlide
• 前往下一张图调用ColinTreeSlideShow1 ▾.GoNextSlide
• 前往上一张图调用ColinTreeSlideShow1 ▾.GoPrevSlide
• 绑定水平滚动布局（初始化）调用ColinTreeSlideShow1 ▾.RegisterScrollViewhorizontalScrollArrangement
• 参数解释：
  
  • slideIndex - 轮播图编号，从1开始算
  • 路径(path) - 图片路径
    
  
  

属性

• 是否开启自动轮播ColinTreeSlideShow1 ▾.AutoScrollEnabled ▾
  
  设置ColinTreeSlideShow1 ▾.AutoScrollEnabled ▾
• 当前正在播放图片编号ColinTreeSlideShow1 ▾.CurrentSlide ▾
  
  设置ColinTreeSlideShow1 ▾.CurrentSlide ▾
• 拖动阈值 - 这个值的取值范围是0~1，对应0%~100%，默认值是0.2。当用户拖动轮播并松开，幅度达到阈值（布局宽度阈值）时，轮播组件将自动跳向目标页。（例子：轮播所在的布局宽度为300像素，拖动阈值为0.2。当用户向右拖动了70个像素并松开时，由于70 > 3000.2=60，轮播将自动跳向上一页。）ColinTreeSlideShow1 ▾.DragThreshold ▾
  
  设置ColinTreeSlideShow1 ▾.DragThreshold ▾
• 自动轮播滚动方向向右（勾选此项轮播向右，取消勾选轮播向左）ColinTreeSlideShow1 ▾.ScrollRightward ▾
  
  设置ColinTreeSlideShow1 ▾.ScrollRightward ▾
• 计时间隔（由于和计时器组件的属性使用同个名称，这里一般会直接有中文翻译。单位是毫秒，即1/1000秒） - 控制轮播自动播放的时间间隔
  ColinTreeSlideShow1 ▾.TimerInterval ▾
  
  设置ColinTreeSlideShow1 ▾.TimerInterval ▾
• 加载时显示底图 - ImageWhileLoading (v2新增) - 不会显示在代码块属性列表中
  
  

下载地址

• 最后更新 2017.9.24 (v2)
• 下载1(本站)
• 样例aia
• 样例apk - Appinventor
• 样例apk - Thunkable
  

---

欢迎光临 清泛IT社区 (https://bbs.tsingfun.com/)

Powered by Discuz! X3.3