开发者社区> 问答> 正文

在钉钉中scroll-view是什么?

在钉钉中scroll-view是什么?

展开
收起
冲冲冲c 2024-08-06 21:56:20 51 0
2 条回答
写回答
取消 提交回答
  • 2024-08-06 22:47:29
    赞同 2 展开评论 打赏
  • scroll-view 是钉钉小程序中一个用于创建可滚动视图区域的基础组件,它允许用户在有限的屏幕空间内水平或垂直滚动内容。以下是使用 scroll-view 组件的一些关键点和属性设置:基本使用• 滚动方向:通过设置 scroll-x 和 scroll-y 属性来控制滚动方向。默认情况下,两者均为 false,表示不开启滚动。设置为 true 则分别开启横向或纵向滚动。

    {
      "scroll-x": true, // 开启横向滚动
      "scroll-y": true // 开启纵向滚动
    }
    

    • 属性配置:• class:外部样式类名,用于自定义 CSS 类。• style:内联样式,直接定义组件样式。• upper-threshold 和 lower-threshold:分别设置距顶部/左边和底部/右边多少距离时触发相关事件,默认为 50px。事件处理• onScroll:滚动时触发,返回包含滚动位置等详细信息的对象

    
    event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}。
    

    • 滚动到底部/右边触发事件:虽然文档多次提及此事件,但具体事件名未直接列出,通常此类事件命名可能为 onReachBottom 或相似名称,请参考实际开发文档确认。注意事项• 竖向滚动时,确保给 scroll-view 设置一个固定的高height,这需要在 ACSS 文件中定义。• scroll-into-view 的优先级高于 scroll-top,意味着如果同时设置了这两个属性,scroll-into-view 生效。• 在 scroll-view 内滚动会阻止页面的回弹效果,因此在该区域滚动不会触发页面的下拉刷新 (onPullDownRefresh)。示例代码片段

    
    JSON 配置{
      "defaultTitle": "Scroll View"
    }
    ACSS 样式.scroll-view_H {
      white-space: nowrap;
      display: flex;
    }
    .scroll-view-item {
      height: 200px;
    }
    .scroll-view-item_H {
      flex-shrink: 0;
      flex-grow: 0;
      width: 300px;
      height: 200px;
    }
    

    此回答整理来自钉群“钉钉开发者社区(互助群)”。

    2024-08-06 22:28:24
    赞同 展开评论 打赏
问答标签:
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
钉钉小程序——为工作方式插上翅膀 立即下载
钉钉客户端自动化的应用 立即下载
使命必达 —— 钉钉企业级 消息服务的机遇与挑战 立即下载