PowerApps 轮播图

我们都知道通常都是用JS写轮播界面，虽然Power Apps里面没有完整的轮播图控件但也是可以做的，而且看起来也不输JS写出来的轮播图。

导入图片

看起来这么多标题其实没什么东西的，首先我们正常创建power apps，然后我们上传几张我们轮播图所需要的图片到power apps中。

创建图片集合

然后我们可以定义一个集合用来存放图片的信息。同时我们给图片编号，用来展示图片的轮播顺序。
我这里定义集合定义在了一个按钮上，你们可以定义在页面的显示，或者其他地方。

ClearCollect(
    Images,
    {
        img: '212718110037640959',
        order: 1
    },
    {
        img: '35265112280249086',
        order: 2
    },
    {
        img: '741595400207680550',
        order: 3
    }
);
UpdateContext({currentImage: 1})

其中Images是集合名称，img是图片的名称，不需要加后缀哈，order是对图片的编号我们轮播顺序将按序号进行。然后我们定义了一个参数current Image表示当前轮播的图片，这里默认从一号图片开始。

添加轮播控件

Ok,集合定义好了之后我们就需要开始制作轮播的容器了，我们添加一个Image控件在Screen上，这个Image就是我们轮播图片的容器。然后我们可以在容器的Image属性上做一个查询。查询Images集合，序号order等于我们cerrentImage我们就可以显示出来了。

LookUp(Images,order=currentImage).img

添加动态轮播控件

这个时候我们其实就可以看到一张图片了，但是我们需要让他自己轮播起来，但是power apps中并没有相关控件，所以我们使用一个定时器，Timer控件，我们点击插入然后搜索Timer，添加好了之后我们可以将右侧的几个按钮打开。

Repeat：反复轮播AutoStart：自动开始等，如果有兴趣的小伙伴可以深入学习。

设定轮播时间

然后我们设置轮播的间接时间：Duration
这里是毫秒，我这里设置的是2秒，所以写的2000，然后我们将这个计时器与我们的image连接起来，每次轮播一张结束的时候我们希望他可以换到下一张，我们找到OnTimerEnd属性，计时结束时，然后我们输入以下代码：

UpdateContext(
    {
        currentImage: If(
            currentImage = Max(
                Images,
                order
            ),
            1,
            currentImage + 1
        )
    }
)

就是说如果当前图片为最后一张序号为3，我们就需要重新定位到1，其他情况轮播序号加一就是下一张图片。

外界干预轮播顺序控件

然后我们如果想干预轮播怎么做呢，我们可以插入两个Icon，原理和OnTimerEnd属性的代码一样的，我们来看向左滑动，一般都是序号减一就可以了但是如果时第一张的话我们就需要跳到最后一张图片（序号最大的图片）

UpdateContext(
    {
        currentImage: If(
            currentImage = 1,
            Max(
                Images,
                order
            ),
            currentImage - 1
        )
    }
)

右滑同理。

UpdateContext(
    {
        currentImage: 
        If(
            currentImage =
            Max(
                Images,
                order
            ),
            1,
            currentImage + 1
        )
    }
)

成品展示

power apps轮播图