ctl
ctl
  • 发布:2023-09-25 17:03
  • 更新:2023-09-25 17:03
  • 阅读:115

【报Bug】nvue 端 waterfall 组件cell 部分重叠

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: mac os

HBuilderX类型: 正式

HBuilderX版本号: 3.8.12

手机系统: iOS

手机系统版本号: iOS 16

手机厂商: 模拟器

手机机型: iphone 14 pro max

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view class="p-page">
<text class="font-bold color-2B font-24 p-b24 m-t16 border-bottom-999">最新资讯</text>
</view>
<waterfall column-count="2" column-width="auto" :show-scrollbar="false" left-gap="20" right-gap="20" column-gap="15" class="p-t24">
<cell v-for="item, index in lists">
<image :src="item.cover" mode="" class="new-cover radius-12"></image>
<view class="m-t8">
<text class="font-12 color-light line-height-20">{{item.start_time}} ~ {{item.end_time}}</text>
</view>
<text class="font-bold font-12 color-2B m-b12">{{item.title}}</text>
</cell>
<loading @loading="onLoading" >加载中...</loading>

    </waterfall>  

</template>

<script>
export default {
data() {
return {
lists: [{
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对 Happy Halloween|万圣节派对'
}, {
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对 Happy Halloween|万圣节派对 Happy Halloween|万圣节派对'
}, {
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对'
}, {
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对 Happy Halloween|万圣节派对'
}, {
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对 Happy Halloween|万圣节派对'
}]
}
},
methods: {
onLoading() {
this.lists = this.lists.concat([{
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对 Happy Halloween|万圣节派对'
}, {
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对 Happy Halloween|万圣节派对 Happy Halloween|万圣节派对'
}, {
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对'
}, {
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对 Happy Halloween|万圣节派对'
}, {
id: 0,
start_time: '2023-11-1',
end_time: '2023-11-3',
cover: 'https://img1.baidu.com/it/u=4180549931,1037025284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=415',
title: 'Happy Halloween|万圣节派对 Happy Halloween|万圣节派对'
}])
}
}
}
</script>

<style>
.new-cover {
width: 320rpx;
}
</style>

操作步骤:

返回上一页,再重复进入几次这个页面

预期结果:

页面正确排版

实际结果:

页面排版错乱

bug描述:

有时候是正确的,返回上一个页面再多进入几次这个nvue页面就会偶尔出现样式错乱的情况

2023-09-25 17:03 负责人:无 分享
已邀请:

要回复问题请先登录注册