文章插图
![JS 轮播图 js轮播图菜鸟教程](http://img.hubeilong.com/220625/042QG331-0.jpg)
文章插图
五,首页轮播图的实现
我们这一节要来实现首页顶部的轮播图功能 。老规矩,先看效果图
由于我们的顶部轮播图要做成动态的数据,所以这个数据就要存到数据库里 。常用的存储数据的数据库有下面几种
云开发自带的数据库mysql数据库
由于mysql数据库需要用Java,php或者python来开发后台,比较麻烦,所以我们这里还是用我们云开发自带的数据库比较好些 。
关于云开发的开通和一些云开发的基础知识,不是本节的重点,我之前云开发基础课里有讲过,如果你没有云开发基础可以去翻看我的云开发课程《零基础入门小程序云开发》也可以去b站搜索‘编程小石头’观看石头哥给大家提供的福利视频课 。
大家开通好云开发以后,记得要在app.js里进行云开发环境初始化
5-1-1,云开发环境初始化
我们上面创建好云开发以后,就要去云开发控制台获取云开发环境id了 。
5-1-2,创建首页轮播图对应的数据集合
我们这里创建一个数据表,小程序云开发里叫数据集合 。
5-2,上传图片到云存储
我们的图片如果想动态更新,就要想办法把图片存储到云服务器里,云开发的云存储功能就为我们很好的存放图片 。这里教大家如何把图片存储到云存储里 。首先进入云开发控制台,找到云存储 。
5-3,添加图片链接到轮播图集合里
我们上面已经能拿到图片的链接了,那么就可以把拿到的图片链接添加到我们的轮播图集合里了 。
5-4,首页获取轮播图数据
我们数据都已经准备好了,接下来就是要在小程序里请求云开发数据库里存储的数据了,我们后期只需要改变云开发数据库里的数据,小程序里的数据就可以动态改变了 。我们在home.js里定义请求数据的方法如下 。
5-5,渲染顶部轮播图
我们要借助swiper和swiper-item组件在页面里渲染顶部轮播图,所以要在home.wxml里定义如下的代码 。
1,图片没有铺满全屏2,轮播图的提示点也没有3,轮播图不能自动滚动下面我们就来解决这些问题5-6,优化轮播图
【JS 轮播图 js轮播图菜鸟教程】首先设置图片的mode,让图片铺满 。这里用到了image的mode属性,如下图 。
home.wxml代码如下:
5-7,设置自动轮播
我们要设置轮播图的自动轮播等属于,其实就是来设置swiper组件的一些属性 。其实官方都有给出来的 。
- 大数据建模 大数据分析与建模
- 纯照片排版 照片排版怎么排版
- 乐云免费主机 云主机如何使用教程
- 探案大师剧本杀 探案笔记颠倒梦想剧本杀
- 433mhz无线模块 433m无线模块使用教程
- 云托管产品 云托管接入
- 暗物质存在的证据是什么 暗物质 证据
- excel空格填充上一行内容 excel空格自动填充上一行
- ddos防御价格 DDOS价格
- cad快速看图 mac mac版cad怎么打印图纸