实践:swiper的引入

来自CloudWiki
跳转至: 导航搜索

swiper

scene.js:

<swiper class = "scene-template" display-multiple-items="模板:2">

  <swiper-item>
       <view class="scene-item" >
           <img class="scene-item-cover"src="" mode="aspectFit">
       </view>
  </swiper-item>
  <swipter-item>
  </swiper-item>

scene.css:

.scene-item {
     height: 180rpx;

}

.scene-item-cover {
    width:100%;
    height:100%;

}

循环展示:

<swiper class = "scene-template" circular="模板:True" display-multiple-items="模板:2">

  <swiper-item>
       <view class="scene-item" >
           <img class="scene-item-cover"src="" mode="aspectFit">
       </view>
  </swiper-item>
  <swipter-item>
  </swiper-item>


图片之间无缝衔接:

<swiper class = "scene-template" circular="模板:True" previous-margin="100rpx" next-margin="100rpx" display-multiple-items="模板:2">

  <swiper-item>
       <view class="scene-item" >
           <img class="scene-item-cover"src="" mode="aspectFit">
       </view>
  </swiper-item>
  <swipter-item>
  </swiper-item>

scene.css:

.scene-item {
     height: 180rpx;
     margin:0 10 rpx;

}

.scene-item-cover {
    width:100%;
    height:100%;

}