swiper详解

滑块视图容器。swiper的初始化高度为150px;swiper-item的初始高度和宽度为100%;都可通过css样式进行swiper、swiper-item的样式重置。 swiper原生组件详解

swiper组件开发

如何使用

到 GitHub 下载 WX-RUI 的代码，将 component 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 swiper 为例，其它组件在对应的文档页查看：

1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

"usingComponents": {
  "rui-swiper": "../../component/swiper/swiper"
}

2. 在 wxml 中使用组件：

2.1 常规滑动轮播

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true"
></rui-swiper>

2.2 衔接滑动轮播(循环滑动轮播)

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  circular="true"
></rui-swiper>

效果图1 ---- 常规滑动轮播和循环滑动轮播

常规滑动轮播和循环滑动轮播

2.3 纵向滑动轮播

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  vertical="true"
></rui-swiper>

2.4 纵向衔接滑动轮播(纵向循环滑动轮播)

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  circular="true" 
  vertical="true"
></rui-swiper>

效果图2 ---- 纵向滑动轮播和纵向循环滑动轮播

纵向滑动轮播和纵向循环滑动轮播

2.5 后边距滑动

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  imgwidth="90vw" 
  circular="true" 
  next-margin="30px"
></rui-swiper>

2.6 前后边距滑动轮播

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  current='{{current}}' 
  isOpacity="true" 
  isScale="true"  
  imgwidth="82vw" 
  circular="true" 
  previous-margin="30px" 
  next-margin="30px" 
  rui-class="rui-banner-img" 
  bindswiperfinish='changeFun'
></rui-swiper>

效果图3 ---- 后边距滑动和前后边距滑动轮播

后边距滑动和前后边距滑动轮播

2.7 多图片滑动轮播

<rui-swiper 
  swiperList="{{bannerList}}" 
  circular="true" 
  autoplay="true" 
  display-multiple-items="2" 
  swiperheight="21.333vw" 
  imgheight="21.333vw" 
  imgwidth="50vw" 
  current='0'
></rui-swiper>

2.8 文字滑动导航

<rui-swiper 
  type="text" 
  class='rui-active' 
  swiperList="{{navList}}" 
  display-multiple-items="4" 
  swiperheight="12vw" 
  imgheight="12vw" 
  previous-margin="10px"