js轮播图菜鸟教程 js轮播图代码运行结果

文章插图
五，首页轮播图的实现我们这一节要来实现首页顶部的轮播图功能。老规矩，先看效果图
5-1，开通云开发由于我们的顶部轮播图要做成动态的数据，所以这个数据就要存到数据库里。常用的存储数据的数据库有下面几种
云开发自带的数据库mysql数据库由于mysql数据库需要用Java，php或者python来开发后台，比较麻烦，所以我们这里还是用我们云开发自带的数据库比较好些。
关于云开发的开通和一些云开发的基础知识，不是本节的重点，我之前云开发基础课里有讲过，如果你没有云开发基础可以去翻看我的云开发课程《零基础入门小程序云开发》也可以去b站搜索‘编程小石头’观看石头哥给大家提供的福利视频课。
大家开通好云开发以后，记得要在app.js里进行云开发环境初始化
5-1-1，云开发环境初始化我们上面创建好云开发以后，就要去云开发控制台获取云开发环境id了。
这里的云开发环境id，建议大家直接复制，不要手写，很容易写错的。
如上图，就可以在app.js里做云开发环境的初始化了。只有初始化好云开发环境id，我们才可以使用云开发功能。
5-1-2，创建首页轮播图对应的数据集合我们这里创建一个数据表，小程序云开发里叫数据集合。
如上图所示，我们创建一个名为homeImgs的数据集合，用于存放首页轮播图的图片链接。
5-2，上传图片到云存储我们的图片如果想动态更新，就要想办法把图片存储到云服务器里，云开发的云存储功能就为我们很好的存放图片。这里教大家如何把图片存储到云存储里。首先进入云开发控制台，找到云存储。
然后进入我们新创建的这个文件夹，就可以点击“上传文件”进行文件上传了
然后我们随便点击一个我们上传的图片，就可以拿到图片对应的链接了
https开头的图片链接，可以直接在浏览器里打开。
但是这个https开头的链接有对应的有效期。所以我们的图片如果是在小程序里展示，建议大家使用这个cloud开头的图片链接。
cloud开头的这个链接在浏览器里不能显示，但是在我们的小程序里是可以显示的，并且是永久有效的。
5-3，添加图片链接到轮播图集合里我们上面已经能拿到图片的链接了，那么就可以把拿到的图片链接添加到我们的轮播图集合里了。
如果我们首页轮播图想显示多个图片的话，就可以把我们多个图片链接都添加进来。
这里要记得每个数据里都是用imgUrl字段来保存图片链接的。
5-4，首页获取轮播图数据我们数据都已经准备好了，接下来就是要在小程序里请求云开发数据库里存储的数据了，我们后期只需要改变云开发数据库里的数据，小程序里的数据就可以动态改变了。我们在home.js里定义请求数据的方法如下。
可以看到我们请求数据成功了，但是打印的时候却是空数据。这是因为我们的云开发数据库权限要设置成所有人可读。
因为我们创建homeImgs集合时，默认的是仅创建者可读写。所以我们直接在小程序里请求时，是请求不到数据的。这里把权限改为所有用户可读即可。我们再来请求下数据看看。
这个时候我们添加的3条图片链接数据就可以全部请求到了。接下来我们就要把这些数据显示到页面上了
5-5，渲染顶部轮播图我们要借助swiper和swiper-item组件在页面里渲染顶部轮播图，所以要在home.wxml里定义如下的代码。
然后home.js里的代码也要稍做改造。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：