<template>
<view class="page">
<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="2000" :current="tabIndex"
@change="onswiperchange" ref="swiper1" :style="{ height: screenHeight + 'px' }">
<swiper-item v-for="(page, index1) in pageList" :key="index1">
<waterfall :scrollable="true" :show-scrollbar="false" offset-accuracy="0" @loadmore="loadMore" ref="list"
columnCount="2" :column-gap="10" loadmoreoffset="10" :left-gap='10' :right-gap='10' class='flex-1 bg-white w-100 '>
<!-- 如果没有refresh组件,则一切正常,但是如果加上refresh组件,出现的问题是,会重新绘图,导致页面排序完全乱了,另外 还会出现图片闪现,list组件上也有这个图片闪现问题 -->
<refresh style="width:750rpx;height:100rpx;text-align: center;" @refresh="onrefresh" @pullingdown="onpullingdown"
:display="page.refreshing ? 'show' : 'hide'" v-if='!page.loadMorIng'>
<text>{{ page.refreshText }}</text>
</refresh>
<cell v-for="(item, index) in page.list" :key="index">
<div class="bg-white" style='margin-bottom:50px'>
<image class="imageCover" :src="item.cover" resize="cover" :style="{ height: item.height + 'rpx' }"></image>
</div>
</cell>
</waterfall>
</swiper-item>
</swiper>
</view>
</template>
<script>
let page = [{
"cover": "https://img.alicdn.com/imgextra/i1/96030687/O1CN01v2iRet1Gwgh44UJIB_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 224,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "a232",
},
{
"cover": "https://img.alicdn.com/imgextra/i2/1095690080/O1CN01fClG9l1CSgHVlBeIy_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 180,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "323b",
},
{
"cover": "https://img.alicdn.com/imgextra/i3/43867526/O1CN01Pgb8W125SxNXGM5fQ_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 300,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "c444",
},
{
"cover": "https://img.alicdn.com/imgextra/i4/47563215/O1CN01j4yenn1ZcVwjmxyka_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 400,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "d222",
},
{
"cover": "https://img.alicdn.com/imgextra/i1/96030687/O1CN01v2iRet1Gwgh44UJIB_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 224,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "a232",
},
{
"cover": "https://img.alicdn.com/imgextra/i2/1095690080/O1CN01fClG9l1CSgHVlBeIy_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 180,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "323b",
},
{
"cover": "https://img.alicdn.com/imgextra/i3/43867526/O1CN01Pgb8W125SxNXGM5fQ_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 300,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "c444",
},
{
"cover": "https://img.alicdn.com/imgextra/i4/47563215/O1CN01j4yenn1ZcVwjmxyka_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 400,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "d222",
},
{
"cover": "https://img.alicdn.com/imgextra/i1/96030687/O1CN01v2iRet1Gwgh44UJIB_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 224,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "a232",
},
{
"cover": "https://img.alicdn.com/imgextra/i2/1095690080/O1CN01fClG9l1CSgHVlBeIy_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 180,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "323b",
},
{
"cover": "https://img.alicdn.com/imgextra/i3/43867526/O1CN01Pgb8W125SxNXGM5fQ_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 300,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "c444",
},
{
"cover": "https://img.alicdn.com/imgextra/i4/47563215/O1CN01j4yenn1ZcVwjmxyka_!!0-saturn_solar.jpg_220x220.jpg_.webp",
"height": 400,
"contentText": "测试来一测试来一发发",
"nickName": "sed",
"contentId": "d222",
},
]
export default {
data() {
return {
screenHeight: 0,
tabIndex: 0,
pageList: []
}
},
onLoad() {
this.getInfo()
for (let i = 0; i < 3; i++) {
this.pageList.push({
list: page,
loadMorIng: false,
refreshing: false,
refreshFlag: false,
refreshText: '',
pulling: false,
})
}
},
computed:{
activePage(){
return this.pageList[this.tabIndex]
}
},
methods: {
onswiperchange(e) {
let index = e.detail.current;
this.tabIndex = index;
},
getInfo() {
uni.getSystemInfo({
success: res => {
this.screenHeight = res.windowHeight;
}
});
},
loadMore(e) {
if(this.activePage.loadMorIng){
return
}
this.activePage.loadMorIng =true
this.getList(2)
},
getList(action=1){
uni.showLoading({
mask:true,
title:'加载中'
})
setTimeout(() => {
if(action==1){
this.activePage.list = page
}else {
this.activePage.list = this.activePage.list.concat(page)
}
this.activePage.refreshing = false;
this.activePage.loadMorIng = false
this.activePage.pulling = true;
this.activePage.refreshFlag = false;
this.tabClick = false
this.activePage.refreshText = ''
uni.hideLoading()
}, 1000)
},
onrefresh(e) {
if (this.activePage.refreshing) {
return;
}
this.activePage.refreshing = true;
this.activePage.refreshText = '正在刷新...';
this.getList(1);
},
onpullingdown(e) {
if (this.activePage.refreshing) {
return;
}
this.activePage.pulling = false;
if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
this.activePage.refreshFlag = true;
this.activePage.refreshText = '释放立即刷新';
} else {
this.activePage.refreshFlag = false;
this.activePage.refreshText = '下拉可以刷新';
}
},
}
}
</script>
<style scoped>
.swiper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.bg-white {
background-color: #FFFFFF;
}
.flex-1 {
flex: 1;
}
.imageCover {
width: 337rpx;
}
</style>
- 发布:2020-08-20 01:38
- 更新:2023-02-14 09:35
- 阅读:1116
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: Alpha
HBuilderX版本号: 2.8.7
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: P40
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
你只需要将我的代码,编译,然后上拉 触发 loadmore 加载,就会发现整个页面,图像会全部刷新,类似重绘了,
但是当你去掉refresh,注释掉refresh代码,又会发现,又全部正常了
你只需要将我的代码,编译,然后上拉 触发 loadmore 加载,就会发现整个页面,图像会全部刷新,类似重绘了,
但是当你去掉refresh,注释掉refresh代码,又会发现,又全部正常了
预期结果:
正常使用refresh 并合理追加,上层结构不变,也不会受到任何影响,
正常使用refresh 并合理追加,上层结构不变,也不会受到任何影响,
实际结果:
第一个,整个图像全部刷新,视觉上会有点反常,与传统app不同,并且在重绘过程中,还会出现有些图片白屏情况。第二个,我示例是waterfall 瀑布流,重绘后会发现,又进行了一次自动排序,眼花缭乱的感觉,正常方式,都是从底部追加新内容,但是上层结构是不变的!这问题我们无解了,只有靠官方解决了,否则refresh 就是巨坑,变成了鸡肋,实际项目中,如果refresh存在这种问题,根本就不会使用的
第一个,整个图像全部刷新,视觉上会有点反常,与传统app不同,并且在重绘过程中,还会出现有些图片白屏情况。第二个,我示例是waterfall 瀑布流,重绘后会发现,又进行了一次自动排序,眼花缭乱的感觉,正常方式,都是从底部追加新内容,但是上层结构是不变的!这问题我们无解了,只有靠官方解决了,否则refresh 就是巨坑,变成了鸡肋,实际项目中,如果refresh存在这种问题,根本就不会使用的
bug描述:
1,使用refresh组件后加载数据后发现,list 或者 waterfall 出现页面重绘问题,特别是waterfall 直接造成了重新布局,测试了一天,到凌晨1点半,望反馈,
2,demo我也好了,直接复制我代码,调试即可
3