【报Bug】安卓列表数据减少，会有明显的回收闪烁

分类：uni-app

bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： window10家庭版

HBuilderX类型：正式

HBuilderX版本号： 3.4.7

手机系统： Android

手机系统版本号： Android 12

手机厂商：小米

手机机型： redmi9

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template> <view class="flex-1"> <scroll-view class="flex-1" scroll-y="true" scrollIntoView="scrollIntoView" @scroll="scrollHandler"
key="count"

<view
class=""
style="height: 150px;"
@click="count = count === 19 ? 2 : 19"
点击修改item数量会有明显的减少闪烁，item样式越复杂越明显</view

<view
class="swiper-item"
id="'item' + item" v-for="item in count" key="item" >
<text>12121dsfsd</text>
<text>sdfsdfsf</text>
<text>sdfsdfsdfsd</text>
<text>{{ item }}</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
scrollIntoView: '',
navTop: 0,
count: 19
};
},
methods: {
scrollHandler(e) {
const n = 50 / 1650;
const navTop = n * e.detail.scrollTop;
this.navTop = navTop >= 50 ? 50 : navTop;
},
gotoA() {
this.scrollIntoView = '';
this.$nextTick(() => {
this.scrollIntoView = 'item1';
});
}
}
};
</script>

<style>
page {
height: 100% !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.flex-1 {
flex: 1;
overflow: hidden;
}
.swiper-item {
/ height: 150px; /
}
</style>

操作步骤：

当DOM减少的时候会有很明显的闪烁，看起来像是一个一个删除的样子

预期结果：

不需要一个一个减少，一下子减少就好

实际结果：

一个一个依次减少

bug描述：

当DOM减少的时候会有很明显的闪烁，看起来像是一个一个删除的样子

2022-04-28 09:56 负责人:DCloud_UNI_GSQ 分享

4 个回复

刘家后人 (作者)

<template>  
  <view class="flex-1">  
    <scroll-view  
      class="flex-1"  
      scroll-y="true"  
      :scrollIntoView="scrollIntoView"  
      @scroll="scrollHandler"  
    >  
      <view  
        class=""  
        style="height: 150px;align-items: center;justify-content: center;"  
        @click="count = count === 50 ? 2 : 50"  
        >点击修改item数量 会有明显的减少闪烁，item样式越复杂越明显</view  
      >  

      <view  
        class="swiper-item"  
        :id="'item' + item"  
        v-for="item in count"  
        :key="item"  
      >  
        <text>{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}</text>  
        <text>{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}</text>  
        <text>{{ item }}{{ item }}{{ item }}{{ item }}</text>  
        <text>{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}</text>  
      </view>  
    </scroll-view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      scrollIntoView: '',  
      navTop: 0,  
      count: 50  
    };  
  },  
  methods: {  
    scrollHandler(e) {  
      const n = 50 / 1650;  
      const navTop = n * e.detail.scrollTop;  
      this.navTop = navTop >= 50 ? 50 : navTop;  
    },  
    gotoA() {  
      this.scrollIntoView = '';  
      this.$nextTick(() => {  
        this.scrollIntoView = 'item1';  
      });  
    }  
  }  
};  
</script>  

<style>  
page {  
  height: 100% !important;  
  overflow: hidden;  
  display: flex;  
  flex-direction: column;  
}  
.flex-1 {  
  flex: 1;  
  overflow: hidden;  
}  
.swiper-item {  
  /* height: 150px; */  
  background-color: #f00;  
  margin-bottom: 10rpx;  
}  
</style>