网站建设常用模板下载,万网的app叫什么,北京网站开发设计,网站需求设计文档方法一
1、首先 swiper 标签的宽度是 width: 100%
2、swiper 标签存在默认高度是 height: 150px #xff1b;高度无法实现由内容撑开#xff0c;在默认情况下#xff0c;图片的高度显示总是 150px
swiper 宽度 / swiper 高度 原图宽度 / 原图高度
swiper 高度 swiper …方法一
1、首先 swiper 标签的宽度是 width: 100%
2、swiper 标签存在默认高度是 height: 150px 高度无法实现由内容撑开在默认情况下图片的高度显示总是 150px
swiper 宽度 / swiper 高度 原图宽度 / 原图高度
swiper 高度 swiper 宽度 * 原图高度 / 原图宽度
swiper classswiper-box indicator-dots autoplay circularswiper-item v-for(item, i) in imgList :keyiimage stylewidth: 100% :srcitem modewidthFix //swiper-item
/swiper
.swiper-box {width: 100%;height: calc(100vw * 9 / 16);
}
方法二
1、在每次滑动切换的时候动态地获取 swiper-item 内部的 DOM 的元素的高度
2、将获取的高度动态设置给 swiper 元素
swiper:currentcurrIndexchangechangeSwiper:style{ height: swiperHeight px }indicator-dotsautoplaycircular:duration1000
swiper-item v-for(item, i) in imgList :keyiimage :idwrap i stylewidth: 100% :srcitem modewidthFix //swiper-item
/swiper
currIndex: 0, // 当前索引
swiperHeight: 0, // 滑块的高度(单位px)
onLoad(e) {this.$nextTick(() {this.setSwiperHeight(); // 动态设置 swiper 的高度});
},
/* 切换 swiper 滑块 */
changeSwiper(e) {this.currIndex e.detail.current;this.$nextTick(() {this.setSwiperHeight(); // 动态设置 swiper 的高度});
},
/* 动态设置 swiper 的高度 */
setSwiperHeight() {const element #wrap this.currIndex;const query uni.createSelectorQuery().in(this);query.select(element).boundingClientRect();query.exec(res {if (res res[0]) this.swiperHeight res[0].height;});
},
