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

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 事件

要回复问题请先登录注册