图片轮播拓展 - ColinTreeSlideShow

App Inventor 2 · 发表于 2024-06-17 19:51:54

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

基本使用流程

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

DesignPageScreenshot.png (108.3 KB, 下载次数: 36)

下载附件

2024-06-17 19:52 上传
在添加列表项之前先初始化一下，调用传入一个参数：
调用ColinTreeSlideShow1 ▾.RegisterScrollViewhorizontalScrollArrangement
给轮播添加图片：
调用ColinTreeSlideShow1 ▾.AddPhotopath

事件

方法

添加（追加）图片调用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新增) - 不会显示在代码块属性列表中

下载地址

[资源分享] 图片轮播拓展 - ColinTreeSlideShow