网站首页 >> 牛刀云小程序开发 >> 第1篇制作模式 >> 页面制作 >> 内容组件

2.3.5.7 幻灯片

幻灯片组件是一个图片轮播组件,如图4-5-10所示,幻灯片对5张图片进行轮播,同一时刻只显示其中一张,图4-45中分别显示了第134张图片。这些图片来自于数据集中某个图片类型的列,这个数据集中有5行数据,每行数据存储一张图片。

说明: 幻灯片2说明: 幻灯片1说明: 幻灯片3

4-5-10  幻灯片组件

1、基础属性

幻灯片组件提供了11个基础属性:

l  数据:指定图片来自的数据集

l  图片列:指定图片来自的数据列

l  显示指示点:是否显示指示点,显示提示点可看出共有几张图片,正在显示第几张图片

l  是否纵向:图片是水平方向切换还是垂直方向切换

l  自动切换:设置是否自动切换图片,如果设为否,用户可以通过滑动图片切换图片

l  当前序号:打开页面时,从第几张图片开始显示,默认为0,代表第一张图片

l  切换间隔:图片自动切换时间间隔,单位毫秒

l  滑动动画时长:图片切换时动画的时长,单位毫秒

l  采用衔接滑动:衔接滑动指最后一张图片显示后,第一张图片从右侧滑出,看起来比较连贯。非衔接滑动指最后一张图片显示后,向左调到第一张图片并显示

l  指示颜色:设置非当前指示点的颜色

l  当前指示颜色:设置当前指示点的颜色

 

2、事件

滑块项提供了1个事件,单击事件,在单击每个滑块项时都会触发。可用于单击幻灯片中的某个图片打开页面。

 

3、样式

幻灯片组件提供了1个特有样式:预定义图片模式,用来设置幻灯片里面图片的显示方式。关于预定义图片模式的具体说明参见“4.5.2图片”一节。

 

4、示例:单击幻灯片中的图片打开相应的页面

幻灯片中播放的图片都是商品图片,单击后,使用商品详情页打开。

幻灯片组件的“数据”属性对应的数据集中,不仅要有图片列,用于幻灯片的显示,还要有商品名称列,作为打开商品详情页时传递给商品详情页的参数。

在商品详情页中,设置页面参数“商品名称”接收传入的参数,同时设置商品数据集的过滤条件,增加按页面参数“商品详情”过滤商品名称列的过滤条件。

在设计区单击幻灯片组件,会选中幻灯片组件中的滑块项组件,设置滑块项组件的“单击事件”为“打开子页面”操作,“页面源”选择商品详情,设置“参数”中的商品名称参数等于“动态列表当前行.商品名称”。

    运行后,单击幻灯片中的图片,会打开相应的商品详情页面。如果要打开不同的页面,可以在幻灯片组件对应的数据集中再添加列,用来区分打开的页面。在幻灯片组件的滑块项的单击事件中使用操作组合,根据不同的条件打开不同的页面。