uniapp栅格事件委托

最新推荐文章于 2025-03-04 11:57:41 发布

原创

最新推荐文章于 2025-03-04 11:57:41 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

该博客展示了如何在Vue项目中利用uni-app的uni-grid组件监听子组件的点击事件。通过@change事件，实现点击网格项时播放对应音频的功能。数据是从远程接口获取并绑定到每个网格项上，当选择不同的英雄时，内部音频上下文停止当前播放并切换到新选中的音频源进行播放。

使用@change="chooseHero“监听栅格中所有子组件的点击事件

<template>
  <view class="">
    <uni-grid :column="3" :square="false" @change="chooseHero">
    	<uni-grid-item v-for="(item,index) in hero" :index="index" :key="index">
			<view style="display: flex;flex-direction: column;">
				<image 
				style="width: 200rpx;height: 200rpx;"
				:src=