Uniapp：swiper(滑块视图容器)

目录

• 一、基本概述
• 二、属性说明
• 三、基本使用

---

一、基本概述

一般用于左右滑动或上下滑动，比如banner轮播图

二、属性说明

属性名	类型	默认值	说明	平台差异说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向

三、基本使用

<swiper class="swiper" indicator-dots indicator-color="#32cd32" indicator-active-color="#ffaa00" autoplay interval="2000" duration="400" circular vertical>
  <swiper-item>
    <view class="swiper-item uni-bg-red">A</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item uni-bg-green">B</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item uni-bg-blue">C</view>
  </swiper-item>
</swiper>

.swiper {
  margin-top: 10px;
  height: 300rpx;
}
.uni-margin-wrap {
  width:690rpx;
  width: 100%;;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}