1.在index.wxml中代码编写:
Scroll-view:可滚动视图区域
Swiper:图片轮播容器
indicator-dots:boolean类型,是否显示面板指示点(默认false)
autoplay:boolean类型,是否自动切换(默认false)
interval:number类型,自动切换时间间隔
duration:number类型,滑动动画时长
imgUrls:多个图片的路径集合
item:循环遍历后单个图片的路径
官方参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<scroll-view class="container">
<swiper indicator-dots="{
{indicatorDots}}" autoplay="{
{autoplay}}" interval="{
{interval}}" duration="{
{duration}}">
<block wx:for="{
{imgUrls}}">
<swiper-item>
<image src="{
{item}}" style="height: 220px; width: 100%;" class='img' />
</swiper-item>
</block>
</swiper>
</scroll-view>
可以留意看看style的设置,在这里我将高度定义了,宽度的设置就是自适应。
2.在index.wxml中代码编写:
一般我会在wxml里设置属性和路径,方便调用。
Page({
data:{
imgUrls: [
‘图片路径1’,
'图片途径2'
‘图片路径3’,
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
},
3.在index.wxss中的编写:
样式我一般只会设立高度,宽度就自适应。相对避免手机型号不同,会造成图片不能全屏显示的情况。
.container{
width: 100%;
height: 100vh;
}
swiper{
width: 100%;
height: 220px;
}
.img{
border-top: 1px solid #EDEDED;
border-bottom: 1px solid #EDEDED;
}
完成以上操作,就会完成一个自动轮播切换图片的展示功能。