托尼雪碧东
托尼雪碧东
  • 发布:2019-10-07 16:50
  • 更新:2024-02-02 15:30
  • 阅读:6302

Grid宫格如何实现点击跳转

分类:uni-app

请问如何在uni-ui 的 Grid 宫格组件中实现点击对应宫格页面对应跳转

<view>  
		<uni-grid :column="3" >  
		    <uni-grid-item>  
		        <text class="text">超级跑车</text>  
		    </uni-grid-item>  
		    <uni-grid-item>  
		        <text class="text">跑车</text>  
		    </uni-grid-item>  
		    <uni-grid-item>  
		        <text class="text">经典跑车</text>  
		    </uni-grid-item>  
		      
		</uni-grid>  
	</view>

因为这个组件本身带按钮,但是我是菜鸡不知道怎么用,还请各位包涵

2019-10-07 16:50 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_HRK

DCloud_UNI_HRK

uni-grid-item里面确实是没有对click事件进行emit("click"),官方组件是将点击事件传到父组件uni-grid的change事件里面了。可以通过index下标来判断是点击了哪个item,可参考一下代码.

<uni-grid :column="4" border-color="#03a9f4" @change="change">  
				<uni-grid-item :index="0">  
					<view class="grid-item-box">  
						<image class="image" src="/static/c1.png" mode="aspectFill" />  
					</view>  
				</uni-grid-item>  
				<uni-grid-item :index="1">  
					<view class="grid-item-box">  
						<image class="image" src="/static/c2.png" mode="aspectFill" />  
					</view>  
				</uni-grid-item>  
				<uni-grid-item :index="2">  
					<view class="grid-item-box">  
						<image class="image" src="/static/c3.png" mode="aspectFill" />  
					</view>  
				</uni-grid-item>  
				<uni-grid-item :index="3">  
					<view class="grid-item-box">  
						<image class="image" src="/static/c4.png" mode="aspectFill" />  
					</view>  
				</uni-grid-item>  
			</uni-grid>  
  
//script  
change(e) {  
				let {  
					index  
				} = e.detail  
				this.list[index].badge && this.list[index].badge++  
  
				uni.showToast({  
					title: `点击第${index+1}个宫格`,  
					icon: 'none'  
				})  
			},  

后续若用户强烈要求增加通过click方式触发,则重新添加emit("click")

5***@qq.com

5***@qq.com

同样碰到这种问题,无论在哪里添加事件都不起作用,题主解决了吗

4***@qq.com

4***@qq.com

在原生的方法_onClick中加入this.$emit('click');
就可以了

g***@126.com

g***@126.com

<uni-grid :column="4" :show-border="false" :square="false" @change="toStrategyList">

用 change 事件,监视点击的 grid-item

8***@qq.com

8***@qq.com

<uni-grid :column="4">  
	<uni-grid-item @click.native="userManage">  
	  <view class="grid-item-box">  
		<uni-icons type="person-filled" size="30"></uni-icons>  
		<text class="text">用户管理</text>  
	  </view>  
	</uni-grid-item>  
</uni-grid>

使用原生的click事件:@click.native

追梦随想

追梦随想

这还不简单啊,如果是遍历出来的格子,就在绑定的点击事件里面加个参数判断,如果不是遍历出来的,那就一个一个加点击事件,这个问题不复杂吧...

  • 托尼雪碧东 (作者)

    就是不知道在哪里写点击事件


    2019-10-08 19:22

  • sumsum

    回复 托尼雪碧东: 在<uni-grid>这个标签加 @change="even",就可以点击了,也可以向下边那位人兄在在原生的方法_onClick中加入this.$emit('click');


    2019-12-20 00:55

追梦随想

追梦随想

<uni-grid-item @click="open_window">    
	<text class="text">超级跑车</text>    
</uni-grid-item> 

这样,这很基础的东西啊。。。

  • 托尼雪碧东 (作者)

    这种方法我试过,但是没有用,我在下面贴出我的代码你看看


    2019-10-10 14:36

t***@163.com

t***@163.com

题主有学过vue吗?没有的话建议先去学,学过的建议再去学一遍

托尼雪碧东

托尼雪碧东 (作者)

<template>  
	<view>  
		<uni-grid :column="3" >  
		    <uni-grid-item @click="openDetail">  
		        <text class="text">超级跑车</text>  
		    </uni-grid-item>  
		      
		</uni-grid>  
	</view>  
</template>  
  
<script>  
	import uniGrid from "@/components/uni-grid/uni-grid.vue"  
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"  
	export default {  
		components: {uniGrid,uniGridItem},  
		data() {  
			return {  
				  
			}  
		},  
		methods: {  
			openDetail(e){  
				uni.navigateTo({  
					url: 'carDetail/carDetail'  
				});  
			}  
		}  
	}  
</script>  
  
<style>  
  
</style>  

这是vehicle.vue文件的代码

  • 追梦随想

    路径错了啊,控制台应该有错误提示的,路径用绝对路径或相对路径


    2019-10-10 19:05

  • 追梦随想

    一个vue页面一个文件夹,不支持互相嵌套的,可以新建空白文件夹,然后把两个页面放进去


    2019-10-10 19:06

9***@qq.com

9***@qq.com

请问解决了吗?? 还是不管用 (uni-grid-item)放在这里面一个@clack 无效果

  • 9***@qq.com

    已经解决了 还不会的朋友可以加我qq私


    2019-10-17 22:52

  • 1***@qq.com

    回复 9***@qq.com: 您好,请问qq是》


    2022-06-10 15:47

sumsum

sumsum - 小白

把事件点击放到一个view就可以了,可能uni-grid-item标签不支持

4***@qq.com

4***@qq.com

请问解决了嘛?可以发个例子看一下吗

bycloud

bycloud

请问解决了吗?如何解决的呢?

1***@qq.com

1***@qq.com

uni-grid-item 加 @tap 事件

要回复问题请先登录注册