1.swiper的基本使用
文章來源:http://www.zghlxwxcb.cn/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語法文章來源地址http://www.zghlxwxcb.cn/news/detail-715188.html
到了這里,關于【微信小程序】swiper的使用的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!