APP-NVUE中swiper-item的高度偶发性不受控制，指定了高度时好时坏，频率很高

APP-NVUE中swiper-item的高度偶发性不受控制，指定了高度时好时坏，频率很高

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：4.64

手机系统：Android

手机系统版本号：Android 8.1

手机厂商：OPPO

手机机型：OPPO R11t

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<template>  
<view style="height: 100vh;background-color: #181223;">  
<swiper :indicator-dots="false" :autoplay="false" :duration="500" :vertical="true"  
skip-hidden-item-layout="true"
style="{'width':styleConfig.width+'px','height':styleConfig.height+'px'}">
    <swiper-item v-for="(item,index) in dataList" :key="index" :style="{'background-color':(index===0?'red':'blue')}">
        <view class="content_box_item" :style="{'width':styleConfig.width+'px','height':styleConfig.height+'px'}">
            <text style="color: #fff;">
            {{styleConfig.width}}-{{styleConfig.height}}
            </text>
        </view>
    </swiper-item>
</swiper>
</view>
</template>
<script>
/* 随便换一个大一些的组件，只引用即可 */
import ShortVideoRolling from '@/pages/index/short_video/short_video_rolling';
import routeUtils from '@/utils/route.js';
import {
api
} from '@/utils/index.js'
// #ifdef APP-NVUE
import thorIcon from '@/components/thorui-nvue/thor-icon/thor-icon.vue';
// #endif
export default {
components:{
    ShortVideoRolling,
    // #ifdef APP-NVUE
    thorIcon
    // #endif
},
data() {
    return {
        systemInfo:{},
        styleConfig:{
            width:0,
            height:0,
        },
        dataList:[{id:1},{id:2},{id:3}]
    }
},
onLoad(options) {
    this.systemInfo=uni.getSystemInfoSync();
    this.styleConfig={
        ...this.styleConfig,
        width:this.systemInfo.windowWidth,
        height:this.systemInfo.windowHeight,
    }
},
methods: {

}
};
</script>
<style scoped>
</style>

操作步骤：

随便import一个大一点的组件就会出现这个问题（看示例）。该页面不要做成首页，从其他页面跳转进去，多试几次就出现了

预期结果：

swiper-item的高度生效

实际结果：

swiper-item高度不受控制

bug描述：

nvue中swiper的高度不受控制，第一个swiper-item时不时的变小，一滑动就恢复。 类似抖音纵向滑动的效果，每个swiper-item满屏，随便import一个大一点的组件就会出现这个问题（看示例）


2 回复

swiper-item我写的是满屏，时不时的不生效，专门写了一个空的例子复现的，确实是NVUE有问题


这是一个在uni-app nvue环境下swiper-item高度控制的常见问题。根据你的描述和代码，我分析问题可能出在以下几个方面：

  1. 在nvue中，swiper组件的高度计算机制与vue页面有所不同，特别是在动态设置高度时容易出现异常。

  2. 你同时给swiper和内部view设置了相同的高度，这在某些情况下可能导致渲染冲突。

建议尝试以下解决方案：

  1. 简化高度设置，只给swiper设置高度，内部view使用flex:1填充剩余空间：
<swiper :style="{width: styleConfig.width+'px', height: styleConfig.height+'px'}">
    <swiper-item>
        <view class="content_box_item" style="flex:1">
            <!-- 内容 -->
        </view>
    </swiper-item>
</swiper>

  1. 确保在页面onReady生命周期后再设置高度，避免过早计算导致的问题。

  2. 如果问题仍然存在，可以尝试在swiper上添加@change事件，在滑动时强制重新计算布局：

methods: {
    onSwiperChange() {
        this.$nextTick(() => {
            // 强制更新布局
        });
    }
}
回到顶部