【微信小程序】swiper的使用

进阶的CC

已于 2023-09-17 15:57:17 修改

阅读量3.3k

点赞数

分类专栏：微信小程序文章标签：微信小程序 notepad++ 小程序

于 2023-09-17 15:55:14 首次发布

本文链接：https://blog.csdn.net/qq_57676486/article/details/132944768

版权

微信小程序专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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语法