🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
**问题1:轮播图高度是固定的,与图片高度不一致时,会出现样式问题** 轮播图图片使用了属性:mode="widthFix",根据宽度自动计算高度,但是轮播图组件的高度是固定的150px,切换机型获取改变宽度的话,轮播图显示就会出现问题 ![](https://img.kancloud.cn/89/94/8994d4d3ae95013bede420777e22538b_639x311.png) 解决方法:获取图片高度,让轮播图高度始终和图片一致 1.使用变量改变轮播图高度 ``` <swiper indicator-dots autoplay circular duration indicator-color="blue" indicator-active-color="pink" style="height:{{swiperHeight}}px"> ``` 2.在js中获取图片高度,给变量赋值,改变轮播图高度 ``` 1.在image组件中有一个图片加载完成的方法:bindload <image src="{{item.imageUrl}}" class="image" mode="widthFix" bindload="imgLoad"></image> 2.在js中使用这个方法: //轮播图图片加载完成 imgLoad(val) { //获取图片高度(获取组件高度) const query = wx.createSelectorQuery(); //创建查询元素 query.select('.image').boundingClientRect(); //绑定元素 // query.selectViewport().scrollOffset() query.exec( (res) =>{ //返回一个数组 const height = res[0].height; console.log(height) this.setData({swiperHeight : height}) //赋值 }) }, ``` ![](https://img.kancloud.cn/69/27/69277b69538183d896e7e2f1f528e8fe_578x258.png) **问题2:给轮播图设置圆角** ``` //添加一个类,设置样式 .swiper{ border-radius: 10rpx; overflow: hidden;//超过高度隐藏,要不然无法显示圆角 transform: translateY(0);//webview熏染问题,兼容个别机型,不加可能出现有些角没有效果 } ```