微信小程序 图片轮播

欢迎点击「算法与编程之美」关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

图片轮播在很多APP中都很常见,那么该如何实现呢?

Swiper滑块视图容器用来在指定区域内切换内容的显示,可以用于制作图片轮播效果。

解决方案

从网上下载好图片之后,将其拖动到小程序的一个文件夹内保存。(笔者将这些图片保存在pages的子目录images下),然后再按照小程序设计流程:在js提供数据(此处即要轮播的图片),在wxml进行布局。

在js:

在wxml:

代码解释:

设置autoplay等于true时就可以自动进行轮播,设置indicatorDots等于true时代表面板显示点。还有interval,duration均为swiper的属性。

wx:for列表渲染单个组件;blockwx:for列表渲染多个组件。

效果图:

图3.1图片轮播效果

结语

在wxml文件里采用swiper滑块视图容器组件进行轮播区域的布局,在js文件提供轮播图片,是否自动播放,轮播的时长等数据,通过数据绑定的方式渲染到页面上。掌握swiper组件的属性有利于我们更好地设置轮播。

实习编辑 | 王楠岚

责 编 | 赵 微

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191214A008DR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券