swiper

作者: 9ce066a9bfb3 | 来源:发表于2018-07-15 00:03 被阅读0次

微信官方文档: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

其它的效果可参考微信小程序官方文档,或者自行添加

相关文章

网友评论

      本文标题:swiper

      本文链接:https://www.haomeiwen.com/subject/xwuupftx.html