uniapp v-for循环中,点击click只对其中一个列表有作用,在这个比表中显示图片
时间: 2024-06-09 21:12:27 浏览: 183
要在uniapp v-for循环中为每个列表添加点击事件,可以使用@click.native修饰符。例如:
```
<template>
<view>
<view v-for="(item, index) in list" :key="index" @click.native="handleClick(index)">
<image :src="item.imgUrl"></image>
<text>{{item.text}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ imgUrl: 'https://example.com/image1.jpg', text: 'Text 1' },
{ imgUrl: 'https://example.com/image2.jpg', text: 'Text 2' },
{ imgUrl: 'https://example.com/image3.jpg', text: 'Text 3' },
]
};
},
methods: {
handleClick(index) {
// 在这里处理点击事件
console.log('点击了第' + (index + 1) + '个列表');
}
}
}
</script>
```
如果要在列表中显示图片,可以使用`<image>`组件,并将`src`属性绑定到数据中的图片地址。例如:
```
<template>
<view>
<view v-for="(item, index) in list" :key="index" @click.native="handleClick(index)">
<image :src="item.imgUrl"></image>
<text>{{item.text}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ imgUrl: 'https://example.com/image1.jpg', text: 'Text 1' },
{ imgUrl: 'https://example.com/image2.jpg', text: 'Text 2' },
{ imgUrl: 'https://example.com/image3.jpg', text: 'Text 3' },
]
};
},
methods: {
handleClick(index) {
// 在这里处理点击事件
console.log('点击了第' + (index + 1) + '个列表');
}
}
}
</script>
```
注意,为了避免图片加载失败导致页面布局错乱,可以在`<image>`组件中添加`mode='aspectFill'`属性,使图片按照固定比例缩放,填充满容器。
阅读全文