uniapp 使用uni-grid宫格组件通过配置项event属性调用方法或跳转页面

1,413 阅读1分钟

官方示例代码

<uni-grid :column="4" :highlight="true" @change="change">
                        // method 为菜单点击的方法
			<uni-grid-item v-for="(item, index) in MenuList" :index="index" :key="index" @click.stop="method">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">文本信息</text>
				</view>
			</uni-grid-item>
</uni-grid>

配置项 MenuList

menuList: [{
        id: 0,
        url: 'grid-item的路径',
        event:'定义的方法'
},
{
        id: 1,
        url: 'grid-item的路径',
        event:'定义的方法'
},
]

自定义事件调用

    methods:{
        callFun(funcName) {
            let methods = this.$options.methods;
            const _this = this;
            // 调用event
            methods[funcName].call(_this);
        }
    }

使用案例

    methods:{
        // 此处为菜单grid-item的点击事件
        method(e) {
            // 如何需要直接url跳转可在menuList中设置对应的url,无则设置为空字符串
            // 根据url进行判断
            if(e.url) {
                uni.navigateTo({
                                    url:e.url
                            })
            }else {
                // 调用自定义的调用方法
                // 传递配置的event则可直接进行方法调用
                this.callFun(e.event)
            }
        }
    }