微信小程序|图片轮播

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

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

问题描述

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

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

解决方案

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

js:

Page({

data: {

indicatorDots:true,

autoplay:true,

interval:5000,

duration:1000,

imgUrls:[

"/pages/images / 日暮 .jpg",

"/pages/images/ 海浪 .jpg",

"/pages/images/ 窗户 .jpg",

"/pages/images/ 马路 .jpg"

]

},

wxml:

<view>

<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}">

<swiper-item>

<image src="{{item}}"  style="width:100%"></image>

</swiper-item>

</block>

</swiper>

</view>

代码解释:

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

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

效果图:

3.1 图片轮播效果

结语

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

实习编辑   |   王楠岚

责       编   |   赵   微

where2go 团队

   

微信号:算法与编程之美          

长按识别二维码关注我们!

温馨提示: 点击页面右下角 “写留言”发表评论,期待您的参与!期待您的转发!

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章