Grid宫格如何实现点击跳转

分类：uni-app

uniapp原生插件 uni_app uniapp

请问如何在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 负责人:无分享

14 个回复

最佳回复

HRK_01

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

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

4***@qq.com

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

g***@126.com

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

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

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

题主有学过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文件的代码