Question

我有一张图片列表（如图库）。图片上的长按（我正在使用Nativescript-vue）将更改图像的样式，并使其显示为“已选择”。这是图像：

<ListView layout="grid" ref="backedupImages" for="image in sortedBackedupImages">
      <v-template>
        <ImageComponent
          v-bind:style="{backgroundColor:isSelected(image.identifier) ? 'cyan' : 'white'}"
          :onLongPress="()=>{onLongPress(image.identifier)}"
          :onShortPress="()=>{onShortPress(image.identifier)}"
          :image="image"
        ></ImageComponent>
      </v-template>
    </ListView>

如您所见，我正在调用某些“ isSelected”方法，以检查是否选择了图像。该方法位于mixin中：

isSelected(identifier){            
            const isSelected = this.selectedImages.includes(identifier);
            return isSelected
        }

这是onLongPress方法，用于切换图像选择状态：

onLongPress(identifier) {
            if(this.selectedImages.includes(identifier)){
                const index = this.selectedImages.indexOf(identifier);
                this.$delete(this.selectedImages,index);
            }else{
                const index = this.selectedImages.length;
                this.$set(this.selectedImages,index,identifier);
            }
        },

数组操作似乎起作用，但是我没有任何视图反应性。可能是什么问题呢？ Vue中有更好的方法吗？我认为我无法使用计算属性，因为我需要将参数传递给“计算”。

Answer 1

您遇到的问题是v-for上的ListView循环将无法正常运行。 nativescript-vue documentation中对此问题进行了说明：

<ListView>不会像使用v-for循环时所希望的那样遍历列表项。相反，<ListView>仅创建必要的视图以在屏幕上显示当前可见的项目，并重新使用滚动时已经在屏幕外的视图。这个概念称为视图回收，通常在移动应用中用于提高性能。

这很重要，因为您不能依赖v-template内附加的事件侦听器。相反，您需要使用itemTap事件，该事件包含被点击项目的索引和列表中的实际项目。


onItemTap（事件）{
     console.log（event.index）
     console.log（event.item）
    }

从v-bind：style内调用函数不会触发视图更新

1 个答案: