实践:swiper的引入

来自CloudWiki
Cloud17讨论 | 贡献2019年2月9日 (六) 09:10的版本 (创建页面,内容为“==swiper== scene.js: <swiper class = "scene-template" display-multiple-items="{{2}}"> <swiper-item> <view class="scene-item" > <img class=…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至: 导航搜索

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%;

}