az651704405@126.com
az651704405@126.com
  • 发布:2020-11-18 10:44
  • 更新:2021-02-23 19:18
  • 阅读:609

uniapp swiper高度怎么自适应的

分类:uni-app

swiper固定高度,很大限制项目的开发,在本站及百度查了多次也没一个合适的方法
毕竟swiper是uniapp自带的功能,请问如果可以做到里面的内容做到自适应高度

2020-11-18 10:44 负责人:无 分享
已邀请:
柏安

柏安

<template>  
    <view style="width:100%;">  
        <swiper  :style="{height:`${height}`}"  :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"  
         :circular="true">  
            <swiper-item style="width: 100%;" v-for="it in imgs" :key="it.id">  
                <image :src="it.url" mode="widthFix" class="img" @load="onLoadImg"></image>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                imgs:[{url:'../../static/img/banner1.jpg',id:1},{url:'../../static/img/banner2.jpg',id:2},  
                {url:'../../static/img/banner3.jpg',id:3},{url:'../../static/img/banner4.jpg',id:4},  
                {url:'../../static/img/banner5.jpg',id:5}],  
                height:''  
            }  
        },  
        methods: {  
            onLoadImg:function(e){  
                this.height = e.detail.height + 'rpx';  
            },  
        }  
    }  
</script>  

<style>  
    .img{  
        display: block;//默认是inline-block 会有几px的空白  
        border: none;  
        width: 100%;  
        height: auto;  
    }  
</style>  
1127566250@qq.com

1127566250@qq.com - JackMe

高度没办法自适应必须设置

要回复问题请先登录注册