使用原生开发高仿瑞幸小程序（二）：使用云存储并实现轮播图

❝

本文由图雀社区认证作者 「曾伟@喵先森」 写作而成，图雀社区将连载其 「使用原生开发高仿瑞幸小程序系列」，点击阅读原文查看作者的 infoQ 链接，感谢作者的优质输出，让我们的技术世界变得更加美好????

❞

创建轮播图

轮播图是我们常见的一种表现形式，通常，图片之间要做到无缝衔接循环需要花一些功夫，而小程序提供的组件就已经可以实现。可以说省去了开发者不少的时间。所以，今天我们要一起来学习以下几件事：

❝

1 学会使用云存储 2 学会使用image组件 3 简单自定义navigation 4 学会使用swiper组件来创建轮播图

❞

一 云存储的使用

让我们一步一步的来，首先我们需要给小程序的首页创建一个背景。如下图 在这里，背景图片我放到了云存储上。要知道，当我们创建小程序后，我们有5G存储空间和5G的流量可以免费使用。这足够我们开发使用了。那么，怎么把背景图图片放到云存储上呢？我们在微信开发者工具的顶部找到“云开发”按钮。这时候，我们会打开“云开发控制台”。我们再点击“存储”按钮，就来到了云存储的管理界面。如下图我们可以通过“新建文件夹”来进行分类管理。想我，我就创建了“images”文件夹，同时在images文件夹下面根据Tabbar又创建了。“home”，“menu”，“cart”，“order”和“my”五个文件夹。因为我们现在在创建首页嘛，所以我会把首页下的相关图片都放在home文件夹下。云存储不仅能存图片，还能存放其他文件，这里就不细讲了。我们可以点击“上传文件”按钮，将今天所需的图片素材，传到云存储上。我将背景图和今天轮播图所需的图片都传到了“images/home”文件夹下。我们的image组件能直接使用File ID，省却了地址转换的麻烦。File ID的地址如下图所示。 上图红框所标示的地址就是我们背景图片的地址，让我们复制一下，接下来马上就会用到。

二 利用image组件创建背景

接下来，我们需要使用的是image组件，我们将通过改变它的z坐标将它放置在其他组件的“下面”，这样就变成了home页面的背景了。为什么不用css中的background-image呢？因为这个属性必须使用网络图片或者base64图片。而我们的云存储的File ID地址必须要转换一下才能获得真实地址，所以太麻烦，不如直接用image来的快。好，接下来看看怎么使用image组件。首先，我们用view给整个试图创建一个根容器，仿造html，我们给class起名为body

<view class="body">
</view>
接着，我们在其中放入image组件，背景图片
<view class="body">
<image class="bg" src="cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/homebg.png"></image>
</view>

我们给image 的class属性赋值为bg。接下我们到home.wxss中做一些工作。首先，我们让body横向撑满整个屏幕

.body{
  width: 100%;
}

接下来，我们要将改变image组件的z坐标了。

.bg{
  /*fixed 固定位置 absolute 跟随屏幕滚动 */
  position: absolute; 
  top: 0;
  z-index: -100;
}