刘家后人
刘家后人
  • 发布:2022-04-28 09:56
  • 更新:2022-05-20 15:08
  • 阅读:224

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

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

手机系统: Android

手机系统版本号: Android 12

手机厂商: 小米

手机机型: redmi9

页面类型: nvue

vue版本: vue2

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
点击修改item数量 会有明显的减少闪烁,item样式越复杂越明显12121dsfsdsdfsdfsfsdfsdfsdfsd{{ item }} 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'; }); } } }; page { height: 100% !important; overflow: hidden; display: flex; flex-direction: column; } .flex-1 { flex: 1; overflow: hidden; } .swiper-item { /* height: 150px; */ }

操作步骤:

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

预期结果:

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

实际结果:

一个一个依次减少

bug描述:

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

2022-04-28 09:56 负责人:DCloud_UNI_GSQ 分享
已邀请:
刘家后人

刘家后人 (作者)

<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>  
DCloud_UNI_GSQ

DCloud_UNI_GSQ

后续会排查优化,先尝试将 nvueStyleCompiler 设置为 weex:https://uniapp.dcloud.io/collocation/manifest.html#app-plus

  • 刘家后人 (作者)

    不太行 weex模式 样式全乱了

    2022-04-29 19:43

DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX alpha 3.4.10+ 已经修复

要回复问题请先登录注册