微信官方文档:swiper
核心节点:<swiper></swiper>,在其内部嵌套多个<swiper-item></swiper-item>节点
<swiper indicator-dots='true' circular='false' autoplay='true'
interval='2000' duration="500" previous-margin="0px" next-margin="0px">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
.swiper-item{
display: block;
height: 150px;
}
.demo-text-1{
position: relative;
align-items: center;
background-color: #1AAD19;
}
.demo-text-2{
position: relative;
align-items: center;
background-color: #2782D7;
}
.demo-text-3{
position: relative;
align-items: center;
background-color: #F1A1F1;
}
效果:
swiper.gif
其它的效果可参考微信小程序官方文档,或者自行添加
网友评论