微信小程序--swiper组件

时间：2021-12-08 16:00:58
<view class='swiper-container'>

<swiper indicator-dots="true"

  autoplay="true" interval="" vertical="{{false}}" class='swiper' class='aaa'>

  <block wx:for="{{imgUrls}}">

    <swiper-item >

      <image src="{{item}}"class="slide-image" style='width:100%;height:100%'/>

    </swiper-item>

  </block>

</swiper>

</view>

刚刚练习布局使用了一下swiper容器；

遇到的问题：1.外层嵌套<view class='container'></view>该组件不显示；

2.在iphone5显示是宽度占满屏幕的；换了更大屏幕占不满，右边有空隙；

解决办法：1通过实验这个组件外层就是不能嵌套<view class='container'></view>，但是把class改成其他就可以正常显示；

这是因为app.wxss中全局规定了container的样式把它删了就可以正常显示了（艹，这是重点啊）；

2改<image>的宽和高是不能使该组件宽度占满屏i幕的，要改外层的<view>或直接改<swiper>的width为100%；这样无论在什么屏幕都可以占满了；

3改<swiper-item>的属性没什么卵用使图片占满每个item完全显示,要设置image的宽和高都为100%，但是图片大小不合适会变形；

补充：<image>组件的mode属性，可以控制图片的缩放；

scaleToFill    不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit    保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill    保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix    宽度不变，高度自动变化，保持原图宽高比不变

相关文章