小程序轮播图

小程序轮播图

通常大家在做小程序的时候会用到轮播图，这个功能，我这里就来说一下

效果图

这个图片我是保存到本地的图片 ，效果是可以无限循环的左右滑动，不存在滑动到最后一张图片后滑动不了，也是隔一段时间后会自己去滚动图片

首先给这个轮播图规定一个盒子和样式
wxml代码

<view class="carousel"> </view>

wxss代码
这里我给width定义的是100%，没有给它的长固定写死，便于我们后面放图的时候方便，高度我们定义的是237rpx，盒子的高与顶部距离50rpx。这个大小可以根据自己的要求去写

.carousel {
  width: 100%;
  height: 237rpx;
  padding-top: 50rpx;
}

盒子写好后，我们就要在里面放图片和定义它的样式
我这里用的是这三类标签

<swiper></swiper> <swiper-item></swiper-item> <block></block>

这个在微信开发文档上面都可以搜到，也有介绍 我就不说了
wxml代码

    <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" previous-margin="20rpx" next-margin="20rpx">
    <block wx:for="{{imgUrls}}" wx:key="">
      <swiper-item>
        <image style="display:block;width:99%;margin:0 auto;" src="{{item}}" mode="widthFix"></image>
      </swiper-item>
    </block>
  </swiper>

wxss代码

 imgUrls: [
      '../../images/banner.png',
      '../../images/banner_1.png',
      '../../images/banner_2.png',
    ],
    indicatorDots: true, //导航点
    autoplay: true,
    circular: true, //衔接滑动
    interval: 5000,
    duration: 1000,
    TopIndex: 0, //切换

在swiper中我用{{}}双括号的形式来引用在js中定义的效果：在这里我引用了4个，circular这是采用衔接滑动、interval是隔多长时间去切换、duration是滑动时的时间、autoplay是定义它是否自动播放。
在block中我引用将图片地址链接保存的imgUrls中，在 image标签里面去给它定义相关的属性，图片的宽定义多宽，占据屏幕的百分比，每张图直接的间距是多大这些都可以在image标签里面去给它定义。

注意事项

1. 在image标签里面定义src=“{{item}}”这样来保证图片的循环
2. 你是不是发现了，引入图片后，图片大小和盒子不匹配这个时候我们就要用到mode=“widthFix”这个属性，这个属性是保证图片长不变。高度变化，这个可以根据需求去定义开发文档里面都有，这样轮播图就大致完成了

附上完整代码

wxml

<view class="carousel">
  <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" previous-margin="20rpx" next-margin="20rpx">
    <block wx:for="{{imgUrls}}" wx:key="">
      <swiper-item>
        <image style="display:block;width:99%;margin:0 auto;" src="{{item}}" mode="widthFix"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

wxss

.carousel {
  width: 100%;
  height: 237rpx;
  padding-top: 50rpx;
}

js

page({
	data:{
		imgUrls: [
      '../../images/banner.png',
      '../../images/banner_1.png',
      '../../images/banner_2.png' 
      ],
    indicatorDots: true, //导航点
    autoplay: true,
    circular: true, //衔接滑动
    interval: 5000,
    duration: 1000,
    TopIndex: 0, //切换
		},
})

代码就是这么多了，下一篇文章我们来说所谓的金刚区该如何排列