一、添加轮播图片
二、wxml文件
<!-- 轮播图 -->
<view class='swipercontainer'>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" vertical='{{vertical}}' circular='{{circular}}' indicator-active-color='blue'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<navigator url="{{item.link}}" hover-class="navigator-hover">
<image src="{{item.url}}" mode="widthFix" class="slide-image swipimg"/>
</navigator>
</swiper-item>
</block>
</swiper>
</view>
三、js文件
var app = getApp();
Page({
data: {
imgUrls: [
{
link:'/pages/index/index',
url:' /imgs/img-gaokao.jpg'
},
{
link: '/pages/index/index',
url: ' /imgs/img-bog.jpg'
},
{
link: '/pages/index/index',
url:' /imgs/3.jpg'
}
],
indicatorDots: true, // 是否显示面板指示点
autoplay: true, //是否自动切换
circular: true, //是否采用衔接滑动
vertical: false, //滑动方向是否为纵向
interval: 3000, //自动切换时间间隔
duration: 100, //滑动动画时长
},
})
四、wxss文件
.swipercontainer {
position: relative;
left: 0;
right: 0;
width: 100%;
}
.swipimg {
width: 100%;
overflow: hidden;
}