scroll-view 可滚动视图区域
https://open.dingtalk.com/document/orgapp/mini-app-scroll-view-the-scrollable-area
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;
}
此回答整理来自钉群“钉钉开发者社区(互助群)”。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。