添加链接 注册    登录
link之家
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
酒量小的凳子  ·  VBA小程序_遍历所有工作表_取消隐藏所有行 ...·  5 月前    · 
聪明的海龟  ·  yarn ...·  11 月前    · 
踢足球的芒果  ·  使用多进程Pool.map()时无法pick ...·  12 月前    · 
高大的板栗  ·  使用selenium时出现 " ...·  1 年前    · 
销魂的自行车  ·  Spark运行时自定义derby.log和m ...·  1 年前    · 
link之家  ›  视图容器scroll-view有哪些属性,如何使用_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心
开发平台
https://help.aliyun.com/document_detail/67513.html
踏实的脆皮肠
6 月前
Number 当 scroll-with-animation 设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。 1.9.0 enable-back-to-top Boolean false 当点击 iOS 顶部状态栏或者双击安卓标题栏时，滚动条返回顶部，只支持竖向。 1.11.0 trap-scroll Boolean false 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。 1.11.2 onScrollToUpper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件。 onScrollToLower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件。 onScroll EventHandle 滚动时触发， event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth} onTouchStart EventHandle 触摸动作开始 1.15.0 onTouchMove EventHandle 触摸后移动 1.15.0 onTouchEnd EventHandle 触摸动作结束 1.15.0 onTouchCancel EventHandle 触摸动作被打断，如来电提醒、弹窗 1.15.0
说明 ：使用竖向滚动时，需要给出固定高度，通过 acss 设置 height。

代码示例 

  1. <view class="page">
  2.   <view class="page-description">可滚动视图区域</view>
  3.   <view class="page-section">
  4.     <view class="page-section-title">vertical scroll</view>
  5.     <view class="page-section-demo">
  6.       <scroll-view scroll-y="{{true}}" style="height: 200px;" onScrollToUpper="upper" onScrollToLower="lower" onScroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  7.         <view id="blue" class="scroll-view-item bc_blue"></view>
  8.         <view id="red"  class="scroll-view-item bc_red"></view>
  9.         <view id="yellow" class="scroll-view-item bc_yellow"></view>
  10.         <view id="green" class="scroll-view-item bc_green"></view>
  11.       </scroll-view>
  12.     </view>
  13.     <view class="page-section-btns">
  14.       <view onTap="tap">next</view>
  15.       <view onTap="tapMove">move</view>
  16.       <view onTap="scrollToTop">scrollToTop</view>
  17.     </view>
  18.   </view>
  20.   <view class="page-section">
  21.     <view class="page-section-title">horizontal scroll</view>
  22.     <view class="page-section-demo">
  23.       <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%" >
  24.         <view id="blue2" class="scroll-view-item_H bc_blue"></view>
  25.         <view id="red2"  class="scroll-view-item_H bc_red"></view>
  26.         <view id="yellow2" class="scroll-view-item_H bc_yellow"></view>
  27.         <view id="green2" class="scroll-view-item_H bc_green"></view>
  28.       </scroll-view>
  29.     </view>
  30.   </view>
  31. </view>
  1. const order = ['blue', 'red', 'green', 'yellow'];
  3. Page({
  4.   data: {
  5.     toView: 'red',
  6.     scrollTop: 100,
  7.   },
  8.   upper(e) {
  9.     console.log(e);
  10.   },
  11.   lower(e) {
  12.     console.log(e);
  13.   },
  14.   scroll(e) {
  15.     console.log(e.detail.scrollTop);
  16.   },
  17.   scrollToTop(e) {
  18.     console.log(e);
  19.     this.setData({
  20.       scrollTop: 0,
  21.     });
  22.   },
  23. });
  • scroll-into-view 的优先级高于 scroll-top 。
  • 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动时，无法触发 onPullDownRefresh 。
    • 上一篇：swiper 下一篇：cover-view
    移动开发平台 mPaaS-页面 移动开发平台 mPaaS-image ACSS 语法参考 API 概览 小程序基础库说明
    • 本页导读 （0）
     
    推荐文章
    酒量小的凳子  ·  VBA小程序_遍历所有工作表_取消隐藏所有行_列_vba cells.entirerow.hidden = false-CSDN博客
    5 月前
    聪明的海龟  ·  yarn 安装升级命令_51CTO博客_yarn全局安装命令
    11 月前
    踢足球的芒果  ·  使用多进程Pool.map()时无法pickle <type 'instancemethod'>-腾讯云开发者社区-腾讯云
    12 月前
    高大的板栗  ·  使用selenium时出现 " FileNotFoundError: [WinError 2] 系统找不到指定的文件。" 的解决办法。 - 时间都去哪儿了哈 - 博客园
    1 年前
    销魂的自行车  ·  Spark运行时自定义derby.log和metastore_db的生成路径_HackerLZH的博客-CSDN博客
    1 年前
    今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    link之家 - 链接快照平台
    © 2024 ~ 沪ICP备11025650号