Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【vue3+小程序】List虚拟列表增改不生效 #2239

Open
bo-tea opened this issue Apr 13, 2023 · 3 comments
Open

【vue3+小程序】List虚拟列表增改不生效 #2239

bo-tea opened this issue Apr 13, 2023 · 3 comments
Labels
reproducible 提供了可复现代码,或者已验证可复现
Milestone

Comments

@bo-tea
Copy link

bo-tea commented Apr 13, 2023

NutUI scenes(nutui 场景)

小程序(@nutui/nutui-taro)

NutUI-vue version(nutui-vue 版本)

4.0.5

Vue version(vue 版本)

3.2.47

Operating environment(运行环境)

dev:weapp

Citation method(引用方式)

npm

Node version(node 版本)

19.7.0

Browser and its version(浏览器及其版本)

wechat

System and its version(系统及其版本)

windows10

Taro environmental information(taro 环境信息)

Taro CLI 3.6.2 environment info:
System:
OS: Windows 10
Binaries:
Node: 19.7.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Users\ttav\AppData\Roaming\npm\yarn.CMD
npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD

Reproduction link(重现链接)

codesandbox.io

Steps to reproduce(重现步骤)

拿官网文档的代码小改了下直接放上去了,对数组的增改不会触发列表的刷新,像是丢失了响应式,打印了下实际上响应式没丢。
尝试过用ref代替,结果一样,如果用普通的列表<li>进行数据绑定,效果是正常的。再吐槽下这个组件,真的难用,至少在小程序上是这样的,原版代码测试列表的显示都不正常,看了下已经有几个人开了issue了所以就不再开了。
Markdown不会用 见谅 下面是部分重点代码

    <nut-cell>
      <nut-list
          :height="50"
          :listData="state.count">
        <template v-slot="{ item, index }">
          <div class="list-item" @click="edit(index)">
            {{ index }}
          </div>
        </template>
      </nut-list>
    </nut-cell>
 <script setup>
import { onMounted, reactive } from "vue";
const state = reactive({
  count: new Array(10).fill(0),
});
const edit = (index) => {
  state.count.splice(index, 1);
};
onMounted(() => {
  state.count = state.count.map((item, index) => index + 1);
});
</script>

What is expected?(期望的结果是什么?)

正常增改,页面同步渲染。

What is actually happening?(实际的结果是什么?)

列表没有刷新

@eiinu
Copy link
Member

eiinu commented Apr 13, 2023

目前这个组件在小程序下问题比较多,组件代码结构比较复杂,修复问题和重构组件需要一些时间。
可以尝试使用 Taro 框架提供的虚拟列表:https://docs.taro.zone/docs/virtual-list

@bo-tea
Copy link
Author

bo-tea commented Apr 13, 2023

目前这个组件在小程序下问题比较多,组件代码结构比较复杂,修复问题和重构组件需要一些时间。 可以尝试使用 Taro 框架提供的虚拟列表:https://docs.taro.zone/docs/virtual-list

好的 谢谢 我去试试这个

@YujiaCheng1996
Copy link

那个也有问题,在小程序端不触发scroll。像这种大数据组件不可能去deep监听数组的全部内容的,使用shallowRef的话数组整个重新赋值就好了。

@eiinu eiinu added this to the v4.1.0 milestone May 11, 2023
@eiinu eiinu added the reproducible 提供了可复现代码,或者已验证可复现 label May 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
reproducible 提供了可复现代码,或者已验证可复现
Projects
None yet
Development

No branches or pull requests

3 participants