神秘的bug
- 发布：2025-05-08 15:27
- 更新：2025-05-08 15:29
- 阅读：75
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 4.64
手机系统： Android
手机系统版本号： Android 8.1
手机厂商： OPPO
手机机型： OPPO R11t
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
<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>
<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一个大一点的组件就会出现这个问题（看示例）。该页面不要做成首页，从其他页面跳转进去，多试几次就出现了
随便import一个大一点的组件就会出现这个问题（看示例）。该页面不要做成首页，从其他页面跳转进去，多试几次就出现了
预期结果：
swiper-item的高度生效
swiper-item的高度生效
实际结果：
swiper-item高度不受控制
swiper-item高度不受控制
bug描述：
nvue中swiper的高度不受控制，第一个swiper-item时不时的变小，一滑动就恢复。
类似抖音纵向滑动的效果，每个swiper-item满屏，随便import一个大一点的组件就会出现这个问题（看示例）
