微信小程之swiper

这篇文章主要介绍微信小程序swiper的相关资料,需要的朋友可以参考下

swiper滑块视图容器，适合广告位展示、商品详情展示等等；

一．图片轮播

下面先给一个简单的示例，效果图如下图所示：

 

1.html结构

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

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

      <swiper-item>

        <view class="swiper-slide">

          <image src="{{item.src}}" class="slide-image width-full" height="350" />

        </view>

      </swiper-item>

    </block>

  </swiper>

2. 样式

.swiper-slide image {

height:500rpx;

}

.width-full {

width:100%;

}

3. js

Page({

  data: {

    loadingHidden: false,

    vertical: false,

    autoplay: true,

    indicatorDots: true,

    interval: 2000,

    duration: 500,

    swiper: [

      {

        "src": "/images/goods_details_01.jpg",

      },

      {

        "src": "/images/goods_details_02.jpg",

      },

      {

        "src": "/images/goods_details_03.jpg",

      },

    ],

  },    

//active点切换

changeIndicatorDots: function (e) {

    this.setData({

      indicatorDots: !this.data.indicatorDots

    })

  },

 

  //是否自动切换

  changeAutoplay: function (e) {

    this.setData({

      autoplay: !this.data.autoplay

    })

  },

  //自动切换时间间隔

  intervalChange: function (e) {

    this.setData({

      interval: e.detail.value

    })

  },

  //滑动动画时长

  durationChange: function (e) {

    this.setData({

      duration: e.detail.value

    })

  },

}）

 

以上是一些轮播的基本设置，下面介绍一些其它的实用属性：

indicator-color：设置指示点的的颜色；

indicator-active-color：设置当前选中点的颜色；

circular：是否采用衔接滑动；

vertical：滑动方向是否为纵向，初始值为false

 

二、数字切换轮播图，效果如下图所示：

 

1、html结构

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

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

            <swiper-item>

              <view class="swiper-slide">

                <image src="{{item.src}}" class="slide-image width-full" mode="widthFix" />

                <view class="swiper-num">

                    <text>{{item.num}}/{{swiper.length}}</text>

                  </view>

              </view>

            </swiper-item>

          </block>

        </swiper>

2、样式

.swiper-slide image {

height:500rpx;

}

.width-full {

width:100%;

}

.swiper-num

position:absolute;

bottom:30rpx;

right:30rpx;

background-color:rgba(112,128,144, 0.3);

font-size:28rpx;

line-height:40rpx;

height:40rpx;

padding:0 20rpx;

color:#fff;

}

3. js

Page({

  data: {

    loadingHidden: false,

    vertical: false,

    autoplay: true,

    indicatorDots: true,

    interval: 2000,

    duration: 500,

swiper: [

      {

        num: 1,

        "src": "/images/goods_details_01.jpg",

      },

      {

        num: 2,

        "src": "/images/goods_details_02.jpg",

      },

      {

        num: 3,

        "src": "/images/goods_details_03.jpg",

      },

    ],  

},    

//active点切换

changeIndicatorDots: function (e) {

    this.setData({

      indicatorDots: !this.data.indicatorDots

    })

  },

 

  //是否自动切换

  changeAutoplay: function (e) {

    this.setData({

      autoplay: !this.data.autoplay

    })

  },

  //自动切换时间间隔

  intervalChange: function (e) {

    this.setData({

      interval: e.detail.value

    })

  },

  //滑动动画时长

  durationChange: function (e) {

    this.setData({

      duration: e.detail.value

    })

  },

}）