利用腾讯低代码(lowcode)平台实现左侧分类导航效果

低代码平台自带了左侧导航组件,今天我们就利用平台自带的组件实现一个侧边栏导航的效果

创建导航页面

进入低码平台后,点击创建页面按钮
在这里插入图片描述
录入标题和页面ID
在这里插入图片描述
确定之后可以看到我们新创建的导航页面
在这里插入图片描述

定义页面变量

我们页面上在使用变量的时候需要先定义,小程序里我们是在Page里定义,低代码我们是在变量管理里定义,点击变量管理按钮
在这里插入图片描述
弹出的页面选择刚刚定义好的导航页面
在这里插入图片描述
初始状态时变量是空的,我们点击一下状态变量,定义一下我们要使用的变量,变量标识和变量名设置为slectedType,变量类别选择为无模型,数据类别选择为string,设置好后点击提交按钮
在这里插入图片描述
然后再创建一个types数组,再添加一个状态变量,变量标识和变量名设置为types,变量类别选择为无模型,数据类别选择为array,初始值为如下的数组,设置好后点击提交按钮

[
  {
    
    
    "id": "english",
    "text": "英语",
    "lable": "英语",
    "value": "english"
  },
{
    
    
"lable":"数学",
"value":"shuxue",
"id":"shuxue",
"text":"数学"
}
]

在这里插入图片描述

定义页面展示效果

定义页面比较简单,就是找到需要的组件,点击一下就可以,我们切换到组件页签,找到导航页签的Classification组件,点击一下
在这里插入图片描述

参数绑定

组件选好了之后需要给组件设置参数,先点击删除按钮把默认的参数删掉
在这里插入图片描述
点击超链接的图标可以设置变量,先设置选中值,选中selectedType
在这里插入图片描述
渲染列表点击链接的图标,选中types
在这里插入图片描述
设置好后的页面效果如下
在这里插入图片描述
只需要简单几步就实现了导航的效果是不是觉得挺牛的呢。

猜你喜欢

转载自blog.csdn.net/u012877217/article/details/112801054
今日推荐