【微信小程序】swiper的使用_微信小程序swiper

1.swiper的基本使用

<jxz-header></jxz-header>
<view  class="banner">
  <swiper
  previous-margin="30rpx"
  autoplay
  interval="2000"
  indicator-dots
  indicator-color="rgba(0,0,0,0.3)"
  indicator-active-color="#bda066"
  circular
  >
  <swiper-item>
    <image src="/static/images/banner0.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/images/banner1.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/images/banner2.jpg" mode=""/>
  </swiper-item>
  <swiper-item>
    <image src="/static/images/banner3.jpg" mode=""/>
  </swiper-item>
</swiper>
</view>

/*index.scss*/
.banner{
    padding-top: 30rpx;
    swiper{
      height: 460rpx;
     swiper-item{
      height: 460rpx;
      image{
        width: 690rpx;
        height: 460rpx;
        border-radius: 30rpx;
        -webkit-border-radius: 30rpx;
        -moz-border-radius: 30rpx;
        -ms-border-radius: 30rpx;
        -o-border-radius: 30rpx;
      }
     }
    }
}

----scss语法