<template>
<waterfall column-count="2" column-width="auto" column-gap="10" left-gap="10" right-gap="10"
@loadmore="loadMore">
<cell v-for="(item,index) in list" :key="index">
<view>
<view v-if="item.type == 'one'" class="div1">
<view class="content">
<image class="img" :src="item.img"></image>
</view>
<view class="div2">
<text class="div2_text">克拉斯卡 日系小开口皮带蝴蝶结女士秋冬保暖羊毛触屏手套</text>
<view class="card">
<text class="card-butie">￥5.2补贴</text>
<text class="card-coupon">10元满减券</text>
</view>
<view class="card-text">
<view class="price">
<text class="new-price-sysbol">￥</text>
<text class="new-price">46.9</text>
<text class="price-count">5974人付款</text>
</view>
</view>
</view>
</view>
<view v-if="item.type == 'two'" class="div1">
<view class="content">
<image class="img" :src="item.img"></image>
</view>
<view class="div2">
<text class="div2_text">克拉斯卡 日系小开口皮带蝴蝶结女士秋冬保暖羊毛触屏手套</text>
</view>
</view>
</view>
</cell>
</waterfall>
</template>
<script>
export default {
data() {
return {
list: [],
}
},
onReady() {
this.getList();
},
methods: {
getList() {
this.list = this.list.concat(this.getData());
},
loadMore() {
this.getList();
},
getData() {
let arr = [
"http://gw.alicdn.com/bao/uploaded/i3/TB1R250KVXXXXaSXVXXXXXXXXXX_!!0-item_pic.jpg_500x500q90.jpg_.webp",
"https://gw.alicdn.com/tfs/TB1cnrpqQ9l0K4jSZFKXXXFjpXa-513-750.jpg_q90.jpg",
"https://gw.alicdn.com/tfs/TB1cnrpqQ9l0K4jSZFKXXXFjpXa-513-750.jpg_q90.jpg",
"http://gw.alicdn.com/bao/uploaded/i3/1087100576/TB2PfzQcMCN.eBjSZFoXXXj0FXa_!!1087100576.jpg_500x500q90.jpg_.webp",
"https://gw.alicdn.com/tfs/TB1cnrpqQ9l0K4jSZFKXXXFjpXa-513-750.jpg_q90.jpg",
"https://gw.alicdn.com/tfs/TB1cnrpqQ9l0K4jSZFKXXXFjpXa-513-750.jpg_q90.jpg",
"http://gw.alicdn.com/bao/uploaded/i2/644970537/TB1TagAaqLN8KJjSZFvXXXW8VXa_!!0-item_pic.jpg_500x500q90.jpg_.webp",
"https://gw.alicdn.com/tfs/TB1cnrpqQ9l0K4jSZFKXXXFjpXa-513-750.jpg_q90.jpg",
"http://gw.alicdn.com/bao/uploaded/i4/682269863/O1CN012MjIs66qLShda5i_!!682269863.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i2/1746509568/O1CN01OvxH4L2KYCAxzuH9S_!!0-item_pic.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/3300647359/TB2j5NzvmtYBeNjSspaXXaOOFXa_!!3300647359.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/1688729419/O1CN01njj8BL2JRx4k0CLDv_!!0-item_pic.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i3/1826021285/TB1wjoll26H8KJjy0FjXXaXepXa_!!0-item_pic.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i4/501587050/O1CN01110oKo21wwlBKhqbw_!!0-item_pic.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/2453803149/TB25aVguQ9WBuNjSspeXXaz5VXa_!!2453803149.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/665229603/TB2zC0_XvNNTKJjSspkXXaeWFXa_!!665229603.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i2/1663735410/O1CN01nwGXO71pppFmaDnTj_!!1663735410.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i4/13731726/O1CN01taCFkU1OcY57QoMxI_!!13731726.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/1901698991/TB2o4jaaRnTBKNjSZPfXXbf1XXa_!!1901698991.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i3/178852786/TB2zCLEcA7myKJjSZFzXXXgDpXa_!!178852786.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i4/50983440/TB2bNu5gCtYBeNjSspkXXbU8VXa_!!50983440.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/849090736/O1CN01FZ80Sv1HJ82uFj54D_!!849090736.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/3083689895/O1CN01M5P3yl2MxxcbVKUF1_!!3083689895.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i2/77733556/TB2nBtFzDJYBeNjy1zeXXahzVXa_!!77733556.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i4/150520686/TB27DOfB1ySBuNjy1zdXXXPxFXa_!!150520686.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/516444125/O1CN01vgaq291gLIPRR1tRP_!!0-item_pic.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/1850033064/O1CN01MzAoS31YVM7yM7C2T_!!0-item_pic.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i2/397777997/TB2UK5kH7KWBuNjy1zjXXcOypXa_!!397777997.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i3/3385275239/TB2tbR1rQUmBKNjSZFOXXab2XXa_!!3385275239-0-item_pic.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i3/701968661/TB2SenPqbwrBKNjSZPcXXXpapXa_!!701968661.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/816107753/O1CN01278v9VqvT9sScll_!!816107753.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/3171798553/O1CN01qAEe402D3KCoBY3Y9_!!0-item_pic.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i3/122126647/O1CN01duqyur1yyNBm0d2Mh_!!122126647.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/2658075101/O1CN01JhY6st1nYIxYgcUBZ_!!2658075101-0-lubanu-s.jpg_500x500q90.jpg_.webp",
"http://gw.alicdn.com/bao/uploaded/i1/3372196566/O1CN011yNH1ksyrkgidbj_!!3372196566.jpg_500x500q90.jpg_.webp"
]
let data = [];
for (let i = 0; i < 10; i++) {
let count = Math.floor(Math.random() * 5);
data.push({
img: arr[Math.floor(Math.random() * arr.length)],
type: count <= 3 ? 'one':'two'
});
}
return data;
},
}
}
</script>
<style>
.div1 {
flex-direction: column;
margin-bottom: 20rpx;
border-radius: 16rpx;
}
.div1 .content {
width: 344rpx;
height: 344rpx;
overflow: hidden;
}
.div1 .content .img {
width: 344rpx;
height: 344rpx;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
}
.div2 {
background-color: #ffffff;
padding: 20rpx;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
}
.diview {
background: orange;
margin-left: 20rpx;
margin-right: 20rpx;
}
.div2_text {
lines: 2;
font-size: 28rpx;
color: #515151;
}
.div2 .card {
display: flex;
flex-direction: row;
margin-top: 10rpx;
margin-bottom: 22rpx;
}
.div2 .card .card-butie {
display: flex;
font-size: 24rpx;
color: #EB0028;
padding-right: 12rpx;
}
.div2 .card .card-coupon {
border: 2rpx solid #FE5B1F;
font-size: 24rpx;
color: #FE5B1F;
border-radius: 4rpx;
padding: 0 2rpx;
}
.price {
display: flex;
flex-direction: row;
align-items: center;
}
.price .new-price-sysbol {
color: #E31437;
font-size: 24rpx;
}
.price .new-price {
font-size: 32rpx;
padding-right: 20rpx;
color: #E31437;
}
.price .price-count {
color: #9d9d9d;
font-size: 22rpx;
}
</style>
DYY
- 发布：2023-04-05 13:05
- 更新：2023-05-25 16:40
- 阅读：647
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window10
HBuilderX类型： 正式
HBuilderX版本号： 3.7.9
手机系统： Android
手机系统版本号： Android 12
手机厂商： 华为
手机机型： 荣耀v20
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
1.页面加载后，多向上滑动几页数据
2.此时再滑动页面到第一页数据时，就会发生上述bug。
1.页面加载后，多向上滑动几页数据
2.此时再滑动页面到第一页数据时，就会发生上述bug。
预期结果：
交互正常，没有发生图片错乱，间隔改变等
交互正常，没有发生图片错乱，间隔改变等
实际结果：
图片位置错乱，出现空白。
图片位置错乱，出现空白。
bug描述：
页面第一次加载正常，后面用户滑动到底部后，加载多加载几页数据后，回到第一页时，会随机出现几种异常。(注：每一页数据有10个)
第一种bug：左列的数据第一个数据上边会空出一大片空白或者是右列的数据第一个数据会空出一大片空白，然后会恢复到正常状态。
第二种bug：左页的数据第一个数据和右列的第一个数据交换了位置，然后会恢复到正常状态。
第三种bug：左列的数据第一个和与右列的数据第一个的间隔发生了改变，原本可能代码设置的是10个间隔，有可能变得很大，这时如
果滑动屏幕把左列与右列的第一个数据滑动到上面时，再滑下来，此时的间隔又恢复了正常。
下面是附件的代码以及异常的截图以及视频。
视频中复现了第一种异常和第三种异常。
