swiper

2018-07-15  本文已影响0人  9ce066a9bfb3

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

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

上一篇 下一篇

猜你喜欢

热点阅读