如何解决带有Vue的Swiper.js错误地计算了图像大小
有时,在桌面上,滑动器会错误地计算出可用于幻灯片的宽度或高度。这会导致图像放大。它并不会持续发生。
这是我在Vue组件中初始化刷卡的方式:
import json
with open('/Users/Addy/Physical Activity/heart_rate-2020-10-06.json') as f:
data = json.load(f)
bpm = [item['value']['bpm'] for item in data]
print(bpm)
这是我使用它的上下文:
<template>
<div>
<div ref="mySlider" class="swiper-container">
<div class="swiper-wrapper">
<div v-for="image in images" class="swiper-slide">
<img :src="image['url'] + '?tr=w-540'">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</template>
<script>
import Swiper,{ Navigation,Pagination } from 'swiper';
Swiper.use([Navigation,Pagination]);
export default {
name: "Gallery",props: ['images'],data () {
const loop = Array.isArray(this.images) && this.images.length > 1;
return {
slider: null,mySliderOptions: {
loop: loop,// autoHeight: true,pagination: {
el: '.swiper-pagination'
},navigation: {
nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// Disable preloading of all images
preloadImages: false,// Enable lazy loading
lazy: {
loadPrevNext: true,}
}
},mounted: function () {
this.slider = new Swiper(this.$refs.mySlider,this.mySliderOptions)
this.slider.updateSize()
},}
</script>
<div class="row">
<div class="col-12 col-md-6 order-2 order-md-1 my-2">
<gallery :images="listing.images"></gallery>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。