开发者社区> 问答> 正文

宜搭自定义页面中,如何实现浮窗的导航页,并支持点击对导航跳转至自定义页面相应区域

宜搭自定义页面中,浮窗容器实现与目录页类似,
可以实现点击对应的目录板块,跳转至对应区域。

参考目录:
image.png

浮窗效果:
image.png

需求:
1.浮窗容器展示目录/导航页形式
2.点击浮窗中的导航页文字,跳转到自定义页面对应的区域

展开
收起
游客br3ovivgmfdaq 2024-03-18 15:03:59 146 0
来自:钉钉宜搭
2 条回答
写回答
取消 提交回答
  • 若回答对您有帮助,记得点下赞同哦~

    您好需要实现锚点定位等功能可以参考一下的下列文档 :https://docs.aliwork.com/docs/yida_subject/_1/spz4go8d5hc9mx4p

    2024-03-18 15:57:16
    赞同 8 展开评论 打赏
  • 桃李春风一杯酒,江湖夜雨十年灯。

    在阿里云宜搭平台上,要实现类似目录页的浮窗容器,可以采用以下步骤:

    1. 创建自定义组件
      首先,在宜搭中创建一个自定义组件,设计并实现这个“导航浮窗”功能。浮窗容器可以选择使用宜搭提供的基础组件中的悬浮按钮面板组件,并对其进行样式调整以符合目录/导航样式。

    2. 布局设计
      在自定义组件内部,利用富文本链接或者列表等组件展示目录结构,每个目录项可以是一个可点击的元素(如:链接)。

    3. 设置交互事件
      为每个目录项设置点击事件,通过页面跳转或者锚点定位的方式,将用户导航至目标区域。如果目标区域在同一页面内,可以利用HTML锚点(Anchor)的方式,例如给目标区域设置id属性,然后链接到该id。若目标区域在不同页面,则可以通过配置页面路由实现跳转。

    4. 动态数据绑定
      如果你的目录是动态生成的,可以从后台接口获取目录数据并绑定到对应的组件上,确保数据和视图的一致性。

    示例代码逻辑(仅作示意,具体实现需根据宜搭平台API进行调整):

    // 假设你已经从接口获取了目录数据
    const directoryData = [
      { id: 'section1', title: '区域一' },
      { id: 'section2', title: '区域二' },
      // 更多区域...
    ];
    
    // 对每个目录项进行渲染,并添加点击事件处理函数
    directoryData.forEach(item => {
      const linkComponent = new LinkComponent(); // 假设LinkComponent是可点击的链接组件
      linkComponent.text = item.title;
      linkComponent.onClick = () => {
        if (item.id === 'section1') {
          // 若目标区域在同一页面,跳转到对应锚点
          location.hash = `#${item.id}`;
        } else {
          // 若目标区域在其他页面,可通过宜搭提供的页面路由跳转
          gotoPage('yourTargetPageId');
        }
      };
      // 将链接组件添加到浮窗容器中
      floatingWindowContainer.addComponent(linkComponent);
    });
    

    请参照实际宜搭平台提供的API和组件能力来编写代码,上述示例代码仅为说明思路,不一定是宜搭平台上的真实实现方式。

    2024-03-18 15:51:56
    赞同 8 展开评论 打赏
问答分类:
问答地址:
关联地址:
相关产品:
来源圈子
更多
收录在圈子:
+ 订阅
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
相关文档: 宜搭
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载