1.swiper的基本使用
文章来源:https://www.toymoban.com/news/detail-715188.html
<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语法文章来源地址https://www.toymoban.com/news/detail-715188.html
到了这里,关于【微信小程序】swiper的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!