小程序的swiper基本使用

有关小程序的基本知识可以先看前几篇文章。 小程序的swiper是做轮播图的。 先在index.wxml写

<view>
    <swiper indicator-dots="true" interval="2000" autoplay="true" vertical="true">
        <swiper-item>
            <image src='/images/1.png'></image>
        </swiper-item>
        <swiper-item>
            <image src='/images/2.png'></image>
        </swiper-item>
        <swiper-item>
            <image src='/images/3.png'></image>
        </swiper-item>
    </swiper>
</view>

基本结构view相当于是div，就是个容器，swiper标签是轮播图的容器，swiper-item就是每一个滑动的子项，里面可以包裹其他的元素。
indicator-dots="true" 是否显示指示器。
interval="2000" 自动轮播的时间
autoplay="true" 是否自动轮播
vertical="true" 纵向滑动
更多参数可以参数官方api
PS：由于vertical="true"这些参数的值是字符串，其实就是不为空就代表true了，就算给vertical="flase" 那它还是纵向滚动的 要设置为false 可以这么写 vertical={{false}} 

再来看index.wxss的样式

swiper{
    width:100%;
    height:600rpx;
}
swiper image{
    width:100%;
    height:600rpx;
}

这里需要注意的点是想要设置图片的高度，直接设置image的高度是无效的， 要设置swiper的高度，然后swiper-item会继承swiper的高度，那么设置图片搞就会有效了。