<view class=‘swiper-container‘> <swiper indicator-dots="true" autoplay="true" interval="5000" 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 宽度不变,高度自动变化,保持原图宽高比不变