腾讯低代码(lowcode)实现导航页跳转到详情页_低代码布道师的博客-程序员宅基地

技术标签: 腾讯低代码  低代码  

引言

在我们日常使用的小程序中,在导航页点击图片跳转到详情页是一种常见的功能,那低代码平台中是如何实现的呢?本文就带领大家一步步的实现想要的效果。

需求分析

在导航页上点击图片,可以打开详情页,页面效果如下
在这里插入图片描述

功能实现

按我的理解是应该在图片上设置点击事件,事实是图片并不支持点击事件(好尴尬,看来不能先入为主啊)。需要在图片的父容器上设置
在这里插入图片描述
因为我们选择的是低代码方法,所以是需要自己先创建低代码方法的,具体设置先点击导航条的低代码编辑
在这里插入图片描述
然后我们先定义个公共的router方法,具体代码如下

export function router(method, data) {
    
  return app[method](data)
}

操作方法是点击common的+号,增加一个新方法,方法名命名为router
在这里插入图片描述
然后找到classfication页面,点击handler旁边的+号,增加teacherDeatil方法,代码如下

import {
    router} from '../../common/router'

export default function(e) {
    
    router('navigateTo', {
    pageId:'teacherDetail', params:{
    
        id: e.data.target
    }})
}

具体操作如下图:
在这里插入图片描述
这样方法就定义好了,然后回到我们的编辑器里,设置容器的事件,选择我们刚才创建的低代码方法
在这里插入图片描述
设置好了之后我们需要创建我们的详情页,具体方法是点击创建页面按钮,然后输入页面标题,这里需要注意的地方是页面的ID要和我们刚才在低代码方法里跳转的ID一样,否则找不到页面
在这里插入图片描述

构建和发布

功能开发好后我们需要预览一下效果,点击导航条上的预览发布按钮,接着在cmd里执行

tcb lowcode watch

预览就可以啦

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u012877217/article/details/113372692

智能推荐

随便推点