1***@qq.com
1***@qq.com
  • 发布:2019-08-06 17:27
  • 更新:2019-10-16 17:21
  • 阅读:2423

在使用swiper的时候,发现无法自适应高度

分类:uni-app

在使用swiper的时候,如果将swiper高度设置为auto,则直接不显示,有没有什么办法自适应的?如果要通过js计算高度,那该怎么做?this.$refs也不好使

2019-08-06 17:27 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

问题已解决,可以通过uni自带的createSelectorQuery方法来获取swiper-item真是尺寸,然后在动态赋值给swiper

酒菜儿

酒菜儿

<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>  
  • nikolausliu

    你这种方法在h5端是可以的,在微信小程序下获取不到boundingClientRect,我setTimeout 5000还是undefined,这个框架一堆bug

    2020-03-31 09:52

  • j***@163.com

    这个方法只在初次渲染的时候有用,如果swiper-item的子组件里有个元素的高度是动态的,怎么再去获取他的高度呐??

    2020-05-14 16:34

该问题目前已经被锁定, 无法添加新回复