14-微信小程序banner

现在开始正式实现授权界面了,以前的知识和现在的知识一起融汇起来,就可以编写出出色的小程序了,一切熟练之后,都会变得简单而有趣,而在这之前,你需要做的就是坚持

效果图.gif

一.前言

上一篇文章讲了如何通过app.wpy中的配置文件设置底部工具栏以及路由切换,如何获取底部工具栏的数据,并且在小程序初始化时加载,这一篇文章讲讲如何布局小程序首页的banner轮播图

二.获取顶部banner数据

1.在api.js中定义方法向远程服务器发送请求获取首页数据

获取首页数据.png

2.在首页导入获取首页数据方法

导入方法.png

3.定义变量,将获取的首页数据在首页加载完之后保存起来

定义变量.png

绑定数据.png

三.编写BannerView组件

1.在开发工具中预览

swiper示例预览.png

swiper属性.png

wxml.png

jsdata.png

2.创建BannerView组件

文件目录.png

banner结构.png

banner属性存储变量.png

3.导入组件到首页

导入banner组件.png

注册组件.png

4.将父组件数据传递到子组件

重命名父组件数据.png

注册父组件数据.png

使用父组件数据.png

5.修改图片宽高

图片宽高.png