虚拟列表滚动抖动，key定位偏移

[Walk4Muscle]

https://user-images.githubusercontent.com/14989270/220302681-a4bfeec2-480a-4637-8000-adcffd438743.mp4

[lix-wood]

mark！！

[Wimpy-Kid]

几年了还没有修复

[SmileZXLee]

未能复现，请尝试demo中的虚拟列表是否有此问题

[lix-wood]

• 未能复现，请尝试demo中的虚拟列表是否有此问题

https://github.com/SmileZXLee/uni-z-paging/assets/22437922/b53871ea-1e2d-4c04-9ba5-25c129a1b20e

从uniapp的插件市场下的，demo依然有这个问题

[Wimpy-Kid]

未能复现，请尝试demo中的虚拟列表是否有此问题

页面代码：
<template>
  <view class="page">
    <view class="container">
      <z-paging
          ref="users"
          use-virtual-list
          :fixed="false"
          use-compatibility-mode
          @query="loadFollowList"
          :extra-data="{mode: 'user-list'}"
          :default-page-size="query.per_page"
      ></z-paging>
    </view>
  </view>
</template>

zp-public-virtual-cell 代码：
<template>
  <view>
    <template v-if="extraData">
      <zp-complain-records v-if="extraData.mode==='complain-records'" :item="item" :index="index" :extraData="extraData" />
      <zp-messages v-else-if="extraData.mode==='messages'" :item="item" :index="index" :extraData="extraData" />
      <zp-user-list v-else-if="extraData.mode==='user-list'" :item="item" :index="index" :extraData="extraData" />
    </template>
    <template v-else>
      <zp-messages :item="item" :index="index" :extraData="extraData" />
    </template>
  </view>
</template>

<script>
export default {
    name: "zp-public-virtual-cell",
    props: {
        item: null,
        index: 0,
        extraData: null
    }
}
</script>

cell 代码：
<template>
  <navigator :url="'/userSpace/index?user_id=' + item.user_id"
             class="user flex-center"
             hover-class=""
             :key="index">
    <c-image mode="aspectFill" :src="item.head_img_url" class="avatar mr20" />
    <view style="max-width: 420rpx;">
      <view class="flex-center">
        <view class="name">{{ item.nickname }}</view>
        <view v-if="item.is_auth_status.id == 1" class="decorate flex-center mr10">
          <img src="https://zbtesting-uploads.oss-cn-shenzhen.aliyuncs.com/zbtesting_v5/m/img/icon-v.png" alt="">
          <view>认证专家</view>
        </view>
        <image mode="aspectFit" v-for="title in item.user_title" :src="title.logo_icon" class="title-img mr10 ml10" />
      </view>
      <view class="signature ellipsis m-t-10 m-b-10">
        {{ item.signature }}{{ item.signature }}{{ item.signature }}{{ item.signature }}{{item.signature }}
      </view>
      <view class="count flex-center">
        <view class="mr20">粉丝{{ item.count_fans }}</view>
        <view>关注{{ item.count_follow }}</view>
      </view>
    </view>
    <view v-if="item.follow_status.id != 1" class="right btn follow action-text" @tap.stop="switchFollow(index)">
      <uni-icons style="margin-right: 6rpx" custom-prefix="iconfont" type="icon-chakantieziguanzhu" color="#fff" size="26rpx"></uni-icons>
      关注
    </view>
    <view v-else class="right btn followed action-text" @tap.stop="switchFollow(index)">已关注</view>
  </navigator>
</template>

<script>
import {api, post} from "@/common/js/api";

export default {
    name: "zp-user-list",
    props: {
        item: {
            type: Object,
            default: {}
        },
        index: 0,
        extraData: null
    },
    methods: {
        switchFollow() {},
    }
}
</script>

<style lang="scss">
@import "zp-user-list";
</style>

运行结果： 运行结果视频

[SmileZXLee]

• 未能复现，请尝试demo中的虚拟列表是否有此问题

  1.mp4

从uniapp的插件市场下的，demo依然有这个问题

[SmileZXLee]

未能复现，请尝试demo中的虚拟列表是否有此问题

页面代码：
<template>
  <view class="page">
    <view class="container">
      <z-paging
          ref="users"
          use-virtual-list
          :fixed="false"
          use-compatibility-mode
          @query="loadFollowList"
          :extra-data="{mode: 'user-list'}"
          :default-page-size="query.per_page"
      ></z-paging>
    </view>
  </view>
</template>

zp-public-virtual-cell 代码：
<template>
  <view>
    <template v-if="extraData">
      <zp-complain-records v-if="extraData.mode==='complain-records'" :item="item" :index="index" :extraData="extraData" />
      <zp-messages v-else-if="extraData.mode==='messages'" :item="item" :index="index" :extraData="extraData" />
      <zp-user-list v-else-if="extraData.mode==='user-list'" :item="item" :index="index" :extraData="extraData" />
    </template>
    <template v-else>
      <zp-messages :item="item" :index="index" :extraData="extraData" />
    </template>
  </view>
</template>

<script>
export default {
    name: "zp-public-virtual-cell",
    props: {
        item: null,
        index: 0,
        extraData: null
    }
}
</script>

cell 代码：
<template>
  <navigator :url="'/userSpace/index?user_id=' + item.user_id"
             class="user flex-center"
             hover-class=""
             :key="index">
    <c-image mode="aspectFill" :src="item.head_img_url" class="avatar mr20" />
    <view style="max-width: 420rpx;">
      <view class="flex-center">
        <view class="name">{{ item.nickname }}</view>
        <view v-if="item.is_auth_status.id == 1" class="decorate flex-center mr10">
          <img src="https://zbtesting-uploads.oss-cn-shenzhen.aliyuncs.com/zbtesting_v5/m/img/icon-v.png" alt="">
          <view>认证专家</view>
        </view>
        <image mode="aspectFit" v-for="title in item.user_title" :src="title.logo_icon" class="title-img mr10 ml10" />
      </view>
      <view class="signature ellipsis m-t-10 m-b-10">
        {{ item.signature }}{{ item.signature }}{{ item.signature }}{{ item.signature }}{{item.signature }}
      </view>
      <view class="count flex-center">
        <view class="mr20">粉丝{{ item.count_fans }}</view>
        <view>关注{{ item.count_follow }}</view>
      </view>
    </view>
    <view v-if="item.follow_status.id != 1" class="right btn follow action-text" @tap.stop="switchFollow(index)">
      <uni-icons style="margin-right: 6rpx" custom-prefix="iconfont" type="icon-chakantieziguanzhu" color="#fff" size="26rpx"></uni-icons>
      关注
    </view>
    <view v-else class="right btn followed action-text" @tap.stop="switchFollow(index)">已关注</view>
  </navigator>
</template>

<script>
import {api, post} from "@/common/js/api";

export default {
    name: "zp-user-list",
    props: {
        item: {
            type: Object,
            default: {}
        },
        index: 0,
        extraData: null
    },
    methods: {
        switchFollow() {},
    }
}
</script>

<style lang="scss">
@import "zp-user-list";
</style>

运行结果： 运行结果视频

试试demo有无问题，或提供完整的直接可运行可复现的demo

[Wimpy-Kid]

demo也一样会跳闪，官方demo用的同样的图看不出来，你换个图，列表往下多滑几页就会闪了

<!-- virtual-list-test-cell.wxml 代码 -->
<view class="item data-v-1d67cf60">
<image class="item-image data-v-1d67cf60" mode="aspectFit" src="{{ 'http://dummyimage.com/100x100/' + (index % 2 ? 'ff0000' : '00ff00') }}"></image>
<view class="item-content data-v-1d67cf60">
  <text class="item-title data-v-1d67cf60">{{ "第" + (index + 1) + "行" }}</text>
  <text data-event-opts="{{[['tap',[['titleClick',['第'+(index+1)+'行 虚拟列表展示']]]]]}}"
        style="color:red;margin-left:10rpx;"
        catchtap="__e"
        class="data-v-1d67cf60">虚拟列表展示
  </text>
  <view class="item-detail data-v-1d67cf60">{{ item.detail }}</view>
</view>
<view class="item-line data-v-1d67cf60"></view>
</view>

预览

[SmileZXLee]

demo也一样会跳闪，官方demo用的同样的图看不出来，你换个图，列表往下多滑几页就会闪了

<!-- virtual-list-test-cell.wxml 代码 -->
<view class="item data-v-1d67cf60">
<image class="item-image data-v-1d67cf60" mode="aspectFit" src="{{ 'http://dummyimage.com/100x100/' + (index % 2 ? 'ff0000' : '00ff00') }}"></image>
<view class="item-content data-v-1d67cf60">
  <text class="item-title data-v-1d67cf60">{{ "第" + (index + 1) + "行" }}</text>
  <text data-event-opts="{{[['tap',[['titleClick',['第'+(index+1)+'行 虚拟列表展示']]]]]}}"
        style="color:red;margin-left:10rpx;"
        catchtap="__e"
        class="data-v-1d67cf60">虚拟列表展示
  </text>
  <view class="item-detail data-v-1d67cf60">{{ item.detail }}</view>
</view>
<view class="item-line data-v-1d67cf60"></view>
</view>

预览

[Wimpy-Kid]

demo也一样会跳闪，官方demo用的同样的图看不出来，你换个图，列表往下多滑几页就会闪了

<!-- virtual-list-test-cell.wxml 代码 -->
<view class="item data-v-1d67cf60">
<image class="item-image data-v-1d67cf60" mode="aspectFit" src="{{ 'http://dummyimage.com/100x100/' + (index % 2 ? 'ff0000' : '00ff00') }}"></image>
<view class="item-content data-v-1d67cf60">
  <text class="item-title data-v-1d67cf60">{{ "第" + (index + 1) + "行" }}</text>
  <text data-event-opts="{{[['tap',[['titleClick',['第'+(index+1)+'行 虚拟列表展示']]]]]}}"
        style="color:red;margin-left:10rpx;"
        catchtap="__e"
        class="data-v-1d67cf60">虚拟列表展示
  </text>
  <view class="item-detail data-v-1d67cf60">{{ item.detail }}</view>
</view>
<view class="item-line data-v-1d67cf60"></view>
</view>

预览

很久之前遇到这个问题也是用background来妥协了，这么长时间了，咱是不是可以考虑解决解决这个问题 😅，还是说这个是微信小程序的硬伤，咱们外部是解决不了的

[SmileZXLee]

demo也一样会跳闪，官方demo用的同样的图看不出来，你换个图，列表往下多滑几页就会闪了

<!-- virtual-list-test-cell.wxml 代码 -->
<view class="item data-v-1d67cf60">
<image class="item-image data-v-1d67cf60" mode="aspectFit" src="{{ 'http://dummyimage.com/100x100/' + (index % 2 ? 'ff0000' : '00ff00') }}"></image>
<view class="item-content data-v-1d67cf60">
  <text class="item-title data-v-1d67cf60">{{ "第" + (index + 1) + "行" }}</text>
  <text data-event-opts="{{[['tap',[['titleClick',['第'+(index+1)+'行 虚拟列表展示']]]]]}}"
        style="color:red;margin-left:10rpx;"
        catchtap="__e"
        class="data-v-1d67cf60">虚拟列表展示
  </text>
  <view class="item-detail data-v-1d67cf60">{{ item.detail }}</view>
</view>
<view class="item-line data-v-1d67cf60"></view>
</view>

预览

很久之前遇到这个问题也是用background来妥协了，这么长时间了，咱是不是可以考虑解决解决这个问题 😅，还是说这个是微信小程序的硬伤，咱们外部是解决不了的

这是微信小程序image底层处理机制导致的，插件解决不了，原因也不明。只能暂时使用妥协的方案

[lix-wood]

我在手机上滑了1000多行之后网上滑动，首页数据就出现问题了