uniapp栅格事件委托

落日映苍穹つ 2021-07-25 11:29 716阅读 0赞

使用@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="`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`" mode=""></image>
    				<text>{ { item.name}}</text>
    				<text>{ { item.title}}</text>
    			</view>
    			
    		</uni-grid-item>
        	
        </uni-grid>
      </view>
    </template>
    
    <script>
    
    
    export default { 
      name: '',
      data () { 
        return { 
    	innerAudio:uni.createInnerAudioContext(),
    	  hero:[],
          href:
    'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js?v=43'
        }
      },
      mounted() { 
      	this.getData()
      },
      methods:{ 
    	  chooseHero(e){ 
    		  console.log(e)
    		  const index=e.detail.index
    		  const { selectAudio}=this.hero[index]
    		  // const innerAudio=uni.createInnerAudioContext()
    		  this.innerAudio.stop()
    		  this.innerAudio.src=selectAudio
    		  this.innerAudio.play()
    		  
    	  },
         getData(){ 
    		 uni.request({ 
    		 	url:this.href,
    			method:"GET",
    			success: (res) => { 
    				console.log(res)
    				this.hero=res.data.hero
    			}
    		 })
    	 }
      }
    }
    </script>
    
    <style lang="less" scoped>
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，716人围观）

还没有评论，来说两句吧...

相关阅读

相关事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术，使用事件委托可以节省内存。

悠悠/ 2022年12月25日 04:00/ 0 赞/ 105 阅读

相关网页栅格化

栅格系统的设计原理及应用 ![这里写图片描述][20161008193814733] 在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间

你的名字/ 2022年07月16日 06:10/ 0 赞/ 102 阅读

相关 Bootstrap栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统 > 一.移动设备优先 > H5项目中，meta用于设置屏幕和设备等宽以及是否运行用户缩放及缩放比例的问

我不是女神ヾ/ 2022年06月12日 03:59/ 0 赞/ 217 阅读

相关 bootstrap栅格系统

注意：最后加起来是12列 <div class="row"> <div class="col-md-1">.col-md-1</div> <d

川长思鸟来/ 2022年05月28日 11:13/ 0 赞/ 210 阅读

相关栅格数据裁剪

文章目录使用GDAL命令使用Python代码版权声明：本文为博主原创文章，转载请注明原文出处！写作时间：2019-03-22

缺乏、安全感/ 2022年03月01日 16:14/ 0 赞/ 253 阅读

相关 Bootstrap 栅格系统

1、简介 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义

逃离我推掉我的手/ 2021年11月30日 01:06/ 0 赞/ 322 阅读

相关 [ArcGIS] 栅格计算器

> 【规定】`{SQL表达式}`表示此为可选参数（用\{\}标识） > 未完… 文章目录函数常用例子详细说明示例

心已赠人/ 2021年11月05日 17:18/ 0 赞/ 532 阅读

相关 uniapp栅格事件委托

使用@change="chooseHero“监听栅格中所有子组件的点击事件 <template> <view class=""> <uni

落日映苍穹つ/ 2021年07月25日 11:29/ 0 赞/ 717 阅读

相关 css 栅格系统

父元素容器设置栅格: 内部子元素会按顺序从左往右依次排列在栅格内声明栅格容器 display: grid; 父元素得有

傷城~/ 2021年07月25日 01:15/ 0 赞/ 412 阅读

相关 javascript事件委托和jquery事件委托

javascript事件委托和jquery事件委托初衷：很多的面试都会涉及到事件委托，前前后后也看过好多博文，写的都很不错，写的各有千秋，自己思前想后，为了以后自己的查...

朱雀/ 2020年07月02日 07:28/ 0 赞/ 1016 阅读