搜索
博主信息
博文 85
粉丝 0
评论 0
访问量 125234
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
微信小程序官方组件展示之视图容器scroll-view
软件事业部
原创
851人浏览过

功能描述:
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
属性说明:
WebView

Skyline
组件差异

  1. 默认只会渲染在屏节点,会根据直接子节点是否在屏来按需渲染,若只有一个直接子节点则性能会退化
  2. 横向滚动需打开 enable-flex 以兼容 WebView,如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>
  3. 滚动条的长度是预估的,若直接子节点的高度差别较大,则滚动条长度可能会不准确

    Bug & Tip
  4. tip: 基础库 2.4.0以下不支持嵌套textarea、map、canvas、video 组件
  5. tip: scroll-into-view 的优先级高于 scroll-top
  6. tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
  7. tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部
  8. tip: scroll-view 自定义下拉刷新可以结合 WXS 事件响应 开发交互动画
    示例代码:
    JAVASCRIPT

    1. const order = ['demo1', 'demo2', 'demo3']
    2. Page({
    3. onShareAppMessage() {
    4. return {
    5. title: 'scroll-view',
    6. path: 'page/component/pages/scroll-view/scroll-view'
    7. }
    8. },
    9. data: {
    10. toView: 'green'
    11. },
    12. upper(e) {
    13. console.log(e)
    14. },
    15. lower(e) {
    16. console.log(e)
    17. },
    18. scroll(e) {
    19. console.log(e)
    20. },
    21. scrollToTop() {
    22. this.setAction({
    23. scrollTop: 0
    24. })
    25. },
    26. tap() {
    27. for (let i = 0; i < order.length; ++i) {
    28. if (order[i] === this.data.toView) {
    29. this.setData({
    30. toView: order[i + 1],
    31. scrollTop: (i + 1) * 200
    32. })
    33. break
    34. }
    35. }
    36. },
    37. tapMove() {
    38. this.setData({
    39. scrollTop: this.data.scrollTop + 10
    40. })
    41. }
    42. })

WXML:

  1. <view class="container">
  2. <view class="page-body">
  3. <view class="page-section">
  4. <view class="page-section-title">
  5. <text>Vertical Scroll\n纵向滚动</text>
  6. </view>
  7. <view class="page-section-spacing">
  8. <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  9. <view id="demo1" class="scroll-view-item demo-text-1"></view>
  10. <view id="demo2" class="scroll-view-item demo-text-2"></view>
  11. <view id="demo3" class="scroll-view-item demo-text-3"></view>
  12. </scroll-view>
  13. </view>
  14. </view>
  15. <view class="page-section">
  16. <view class="page-section-title">
  17. <text>Horizontal Scroll\n横向滚动</text>
  18. </view>
  19. <view class="page-section-spacing">
  20. <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
  21. <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  22. <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
  23. <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  24. </scroll-view>
  25. </view>
  26. </view>
  27. </view>
  28. </view>

WXSS:

  1. .page-section-spacing{
  2. margin-top: 60rpx;
  3. }
  4. .scroll-view_H{
  5. white-space: nowrap;
  6. }
  7. .scroll-view-item{
  8. height: 300rpx;
  9. }
  10. .scroll-view-item_H{
  11. display: inline-block;
  12. width: 100%;
  13. height: 300rpx;
  14. }

版权声明: 本站所有内容均由互联网收集整理、上传,如涉及版权问题,我们第一时间处理。
原文链接地址:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学