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

五,首页轮播图的实现 我们这一节要来实现首页顶部的轮播图功能。老规矩,先看效果图 5-1,开通云开发 由于我们的顶部轮播图要做成动态的数据,所以这个数据就要存到数据库里。常用的存储数据的数据库有下面几种 云开发自带的数据库mysql数据库 由于mysql数据库需要用Java,php或者python来开发后台,比较麻烦,所以我们这里还是用我们云开发自带的数据库比较好些。 关于云开发的开通和一些云开发…

五,首页轮播图的实现

我们这一节要来实现首页顶部的轮播图功能。
老规矩,先看效果图

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

5-1,开通云开发

由于我们的顶部轮播图要做成动态的数据,所以这个数据就要存到数据库里。常用的存储数据的数据库有下面几种

  • 云开发自带的数据库
  • mysql数据库

由于mysql数据库需要用Java,php或者python来开发后台,比较麻烦,所以我们这里还是用我们云开发自带的数据库比较好些。

关于云开发的开通和一些云开发的基础知识,不是本节的重点,我之前云开发基础课里有讲过,如果你没有云开发基础可以去翻看我的云开发课程
《零基础入门小程序云开发》
也可以去b站搜索‘编程小石头’观看石头哥给大家提供的福利视频课。

大家开通好云开发以后,记得要在app.js里进行云开发环境初始化

5-1-1,云开发环境初始化

我们上面创建好云开发以后,就要去云开发控制台获取云开发环境id了。

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

这里的云开发环境id,建议大家直接复制,不要手写,很容易写错的。

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

如上图,就可以在app.js里做云开发环境的初始化了。只有初始化好云开发环境id,我们才可以使用云开发功能。

5-1-2,创建首页轮播图对应的数据集合

我们这里创建一个数据表,小程序云开发里叫数据集合。

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

如上图所示,我们创建一个名为homeImgs的数据集合,用于存放首页轮播图的图片链接。

5-2,上传图片到云存储

我们的图片如果想动态更新,就要想办法把图片存储到云服务器里,云开发的云存储功能就为我们很好的存放图片。这里教大家如何把图片存储到云存储里。
首先进入云开发控制台,找到云存储。

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

然后进入我们新创建的这个文件夹,就可以点击“上传文件”进行文件上传了

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

然后我们随便点击一个我们上传的图片,就可以拿到图片对应的链接了

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

https开头的图片链接,可以直接在浏览器里打开。

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

但是这个https开头的链接有对应的有效期。所以我们的图片如果是在小程序里展示,建议大家使用这个cloud开头的图片链接。

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

cloud开头的这个链接在浏览器里不能显示,但是在我们的小程序里是可以显示的,并且是永久有效的。

5-3,添加图片链接到轮播图集合里

我们上面已经能拿到图片的链接了,那么就可以把拿到的图片链接添加到我们的轮播图集合里了。

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

如果我们首页轮播图想显示多个图片的话,就可以把我们多个图片链接都添加进来。

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

这里要记得每个数据里都是用imgUrl字段来保存图片链接的。

5-4,首页获取轮播图数据

我们数据都已经准备好了,接下来就是要在小程序里请求云开发数据库里存储的数据了,我们后期只需要改变云开发数据库里的数据,小程序里的数据就可以动态改变了。
我们在home.js里定义请求数据的方法如下。

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

可以看到我们请求数据成功了,但是打印的时候却是空数据。这是因为我们的云开发数据库权限要设置成所有人可读。

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

因为我们创建homeImgs集合时,默认的是仅创建者可读写。所以我们直接在小程序里请求时,是请求不到数据的。这里把权限改为所有用户可读即可。
我们再来请求下数据看看。

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

这个时候我们添加的3条图片链接数据就可以全部请求到了。接下来我们就要把这些数据显示到页面上了

5-5,渲染顶部轮播图

我们要借助swiper和swiper-item组件在页面里渲染顶部轮播图,所以要在home.wxml里定义如下的代码。

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

然后home.js里的代码也要稍做改造。

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

这样我们的数据就可以在页面上显示出来了。

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

但是我们这里有问题

  • 1,图片没有铺满全屏
  • 2,轮播图的提示点也没有
  • 3,轮播图不能自动滚动
    下面我们就来解决这些问题

5-6,优化轮播图

首先设置图片的mode,让图片铺满。这里用到了image的mode属性,如下图。

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

我把官方文档的链接给到大家:

https://developers.weixin.qq.com/miniprogram/dev/component/image.html
这里的mode裁剪模式,大家可以根据自己的需求设置。

home.wxml代码如下:

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

home.wxss里的代码如下:

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

可以看出,我们的图片这个时候撑满了屏幕,但是会有裁剪

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

这个取决于我们image组件的mode裁剪参数的设置,至于设置哪种裁剪模式,这个你可以根据自己的业务场景来定,最好的是设计出来的图片完全符合比例。这样就不会有裁剪的问题了。

5-7,设置自动轮播

我们要设置轮播图的自动轮播等属于,其实就是来设置swiper组件的一些属性。其实官方都有给出来的。

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

这里也把对应的官方文档链接给到大家,大家可以根据自己的需求去做设置。

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
我这里只设置下面两个属性

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

  • indicator-dots:显示指示点
  • autoplay:自动轮播
    这样我们完整的轮播图功能就实现了。关于轮播图的点击和跳转,我们后面章节再做讲解,这节主要是带大家实现动态的轮播图功能。

本文来自投稿,不代表来拓客立场,如若转载,请注明出处:https://www.laituoke.com/ltk/5445.html