swiper怎么设置自适应高度

分类：uni-app

swiper

swiper固定高度，很大限制项目的开发，

在本站及百度查了多次也没一个合适的方法

毕竟swiper是uniapp自带的功能，能用的话，当然是首选

请问如果可以做到里面的内容做到自适应高度

2019-04-19 20:52 负责人:无分享

3 个回复

酒菜儿

亲测可用。

<template>  
    <view>  
        {{items[current].height}}  

        <swiper class="swiper" @change="change" :style="{height: items[current].height + 'px'}">  
            <swiper-item>  
                <view class="swiper-item">  
                    <view class="bgwhite mt16 p16" v-for="d in 4" :key="d">{{d}}</view>  
                </view>  
            </swiper-item>  
            <swiper-item>  
                <view class="swiper-item">  
                    <view class="bgwhite mt16 p16" v-for="d in 20" :key="d">{{d}}</view>  
                </view>  
            </swiper-item>  
            <swiper-item>  
                <view class="swiper-item">  
                    <view class="bgwhite mt16 p16" v-for="d in 10" :key="d">{{d}}</view>  
                </view>  
            </swiper-item>  
        </swiper>  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                current: 0,  
                items: []  
            }  
        },  

        mounted() {  
            uni.createSelectorQuery().selectAll('.swiper-item').boundingClientRect(data => this.items = data).exec()  
        },  

        methods: {  
            change(e) {  
                this.current = e.detail.current  
            }  
        }  
    }  
</script>

j***@163.com

:style="{height: items[current].height + 'px'}" 多实验了几次，终于成功了，这里最好用个计算函数判断一下items是否为空

2020-05-13 16:56
1***@qq.com

大佬有小程序的写法吗

2020-05-22 09:13
zdbxllalt

回复 j***@163.com: 这种方式在app端好像不行哦！一直报错

2021-03-17 22:35
zdbxllalt

回复 j***@163.com: 只要把值加在dom上，这种写法（:style="{height: items[current].height + 'px'}"）加上就报错

2021-03-17 22:37
DKUN

初始化就保存各个页面的高度，动态加载数据怎么办，数据加载有延迟，获取的高度不准确，都是问题。必须想个办法监听高度的变化。

2021-05-12 15:28