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
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 开源项目积累
    内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayo...
    小狼W阅读 1,619评论 0赞 10
  • 终究还是来了
    你，终究还是来了，还是那样剔透无暇，静悄悄的，簌簌直下。看着你在空中翩翩起舞，舞到枝丫上，堆砌着，洁白素裹；飘到眼...
    付瑜_ddf5阅读 372评论 0赞 0
  • 母乳喂养过程中，提高母乳质量不妨考虑这么做
    首先大家要明白哺乳期妈妈的饮食直接影响到宝宝的健康（母乳喂养的宝宝），所以妈妈们要特别注意合理安排自己的饮食结构。...
    恰是逝水流年阅读 391评论 0赞 3
  • 长相思
    文/奇雪娜 《长相思》 丁酉中秋 夜访康镇 作此篇 怀古畅言 廊桥遗梦，雾霭锁重重。 孤云挑月，残灯恨沉沉。 星疏...
    奇雪娜阅读 268评论 0赞 2
  • 读诗的八个夜晚
    读《诗的八堂课》的情景不难忘，地铁中、餐馆中、公园中、宿舍中……难忘的是我重读这本书的八个夜晚，一天重读一堂课，一...
    陈素封阅读 670评论 1赞 8