踩坑uni中swiper高度固定无法自适应问题

热爱可抵岁月mrx

已于 2023-03-08 16:15:20 修改

阅读量994

点赞数

分类专栏： web前端文章标签： vue.js 前端 javascript Powered by 金山文档

于 2023-03-08 16:13:34 首次发布

本文链接：https://blog.csdn.net/qq_55695208/article/details/129405647

版权

在uniapp中遇到swiper组件默认高度问题，导致图片无法自适应显示。通过动态绑定高度并利用获取节点高度的方法解决了这个问题。具体实现是避免在v-for中直接使用oneDom节点，改用无语义block进行循环，从而实现swiper内容自适应高度的效果。

摘要由CSDN通过智能技术生成

以下是全部代码，我在swiper中写了很多图片，但是只能显示一点，因为uniapp里面的swiper具有默认高度问题，默认高度为150px。图片无法自适应撑开高度，只能写固定高度，给固定值。

显然这种方法并不可取，解决方案就是使用利用获取节点高度的方法来动态绑定高度。

<template>
    <view>
 
        <!-- Tab标签头部 -->
        <view>
            <view class="TopTabs" style="display: flex; flex-direction: row; justify-content: space-evenly;">
                <view class="oneTab" :class="{'active': showingTabIndex == 0}" @click="showingTabIndex = 0">
                    All
                </view>
                <view class="oneTab" :class="{'active': showingTabIndex == 1}" @click="showingTabIndex = 1">
                    BB
                </view>
                <view class="oneTab" :class="{'active': showingTabIndex == 2}" @click="showingTabIndex = 2">
                    CC
                </view>
            </view>
        </view>
        <hr&g