低代码平台自带了左侧导航组件,今天我们就利用平台自带的组件实现一个侧边栏导航的效果
创建导航页面
进入低码平台后,点击创建页面按钮
录入标题和页面ID
确定之后可以看到我们新创建的导航页面
定义页面变量
我们页面上在使用变量的时候需要先定义,小程序里我们是在Page里定义,低代码我们是在变量管理里定义,点击变量管理按钮
弹出的页面选择刚刚定义好的导航页面
初始状态时变量是空的,我们点击一下状态变量,定义一下我们要使用的变量,变量标识和变量名设置为slectedType,变量类别选择为无模型,数据类别选择为string,设置好后点击提交按钮
然后再创建一个types数组,再添加一个状态变量,变量标识和变量名设置为types,变量类别选择为无模型,数据类别选择为array,初始值为如下的数组,设置好后点击提交按钮
[
{
"id": "english",
"text": "英语",
"lable": "英语",
"value": "english"
},
{
"lable":"数学",
"value":"shuxue",
"id":"shuxue",
"text":"数学"
}
]
定义页面展示效果
定义页面比较简单,就是找到需要的组件,点击一下就可以,我们切换到组件页签,找到导航页签的Classification组件,点击一下
参数绑定
组件选好了之后需要给组件设置参数,先点击删除按钮把默认的参数删掉
点击超链接的图标可以设置变量,先设置选中值,选中selectedType
渲染列表点击链接的图标,选中types
设置好后的页面效果如下
只需要简单几步就实现了导航的效果是不是觉得挺牛的呢。