scroll-view 可滚动视图区域

解释:可滚动视图区域,可实现横向滚动和竖向滚动。使用竖向滚动时,需要给定一个固定高度,可以通过css来设置height。

属性说明

属性名类型默认值必填说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber | String50距顶部/左边多远时(单位 px),触发 scrolltoupper 事件
lower-thresholdNumber | String50距底部/右边多远时(单位 px),触发 scrolltolower 事件
scroll-topNumber | String设置竖向滚动条位置。要动态设置滚动条位置,用法scroll-top="{= scrollTop =}"
scroll-leftNumber | String设置横向滚动条位置。要动态设置滚动条位置,用法scroll-left="{= scrollLeft =}"
scroll-into-viewString值应为某子元素 id(id 不能以数字开头),设置滚动方向后,按方向滚动到该元素,动态设置用法scroll-into-view="{= scrollIntoView =}"
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
enable-back-to-topBooleanfalseios点击顶部导航栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupperEventHandle滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolowerEventHandle滚动到底部/右边,会触发 scrolltolower 事件
bindscrollEventHandle滚动时触发, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

示例

在开发者工具中预览效果

扫码体验

scroll-view 可滚动视图区域 - 图1请使用百度APP扫码

代码示例 1:纵向滚动

  1. <view class="wrap">
  2. <view class="title">纵向滚动</view>
  3. <scroll-view
  4. scroll-y
  5. class="scroll-view"
  6. scroll-into-view="{= toView =}"
  7. scroll-with-animation="true"
  8. bind:scrolltoupper="upper"
  9. bind:scrolltolower="lower"
  10. upper-threshold="1"
  11. scroll-top="{= scrollTop =}"
  12. lower-threshold="1"
  13. bind:scroll="myscroll"
  14. enable-back-to-top="true"
  15. >
  16. <view id="one" class="color-a">A</view>
  17. <view id="two" class="color-b">B</view>
  18. <view id="three" class="color-c">C</view>
  19. </scroll-view>
  20. <view class="page-section-btns">
  21. <view class="next" bindtap="tap">下一页</view>
  22. <view bindtap="tapMove">滚动</view>
  23. <view class="scrollToTop" bindtap="scrollToTop">回顶部</view>
  24. </view>
  25. </view>
  1. const order = ['one', 'two', 'three'];
  2. Page({
  3. data: {
  4. toView: 'one',
  5. scrollTop: 0,
  6. },
  7. upper() {
  8. swan.showToast({
  9. title: '到顶了',
  10. icon: 'none'
  11. });
  12. },
  13. lower() {
  14. swan.showToast({
  15. title: '到底了',
  16. icon: 'none'
  17. });
  18. },
  19. scroll(e) {
  20. console.log('获取滚动事件的详细信息e.detail:');
  21. console.dir(e.detail);
  22. this.setData({
  23. scrollTop: e.detail.scrollTop
  24. })
  25. },
  26. scrollToTop(e) {
  27. console.log(e);
  28. this.setData({
  29. scrollTop: 0,
  30. });
  31. },
  32. tap(e) {
  33. for (let i = 0; i < order.length; ++i) {
  34. if (order[i] === this.data.toView) {
  35. const next = (i + 1) % order.length;
  36. this.setData({
  37. toView: order[next],
  38. scrollTop: next * 200,
  39. });
  40. break;
  41. }
  42. }
  43. },
  44. tapMove() {
  45. this.setData({
  46. scrollTop: this.data.scrollTop + 10,
  47. });
  48. }
  49. });

代码示例 2:横向滚动

  1. <view class="wrap">
  2. <view class="title">横向滚动</view>
  3. <scroll-view
  4. scroll-x
  5. class="scroll-view"
  6. bind:scrolltoupper="toLeft"
  7. bind:scrolltolower="toRight"
  8. scroll-left="{= scrollLeft =}"
  9. upper-threshold="1"
  10. lower-threshold="1"
  11. bind:scroll="scroll"
  12. >
  13. <view id="four" class="color-a row-view">A</view>
  14. <view id="five" class="color-b row-view">B</view>
  15. <view id="six" class="color-c row-view">C</view>
  16. </scroll-view>
  17. </view>
  1. const order = ['one', 'two', 'three'];
  2. Page({
  3. data: {
  4. scrollLeft: 'five'
  5. },
  6. toLeft() {
  7. swan.showToast({
  8. title: '到最左边了',
  9. icon: 'none'
  10. });
  11. },
  12. toRight() {
  13. swan.showToast({
  14. title: '到最右边了',
  15. icon: 'none'
  16. });
  17. },
  18. scroll(e) {
  19. console.log('获取滚动事件的详细信息e.detail:');
  20. console.dir(e.detail);
  21. this.setData({
  22. scrollTop: e.detail.scrollTop
  23. })
  24. }
  25. });

Bug & Tip

  • Tip:请勿在 scroll-view 中使用 textarea、map、canvas、video 组件;更多请看原生组件说明scroll-view 可滚动视图区域 - 图2
  • Tip:scroll-into-view 的优先级低于 scroll-top、scroll-left。
  • Bug:在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh。
  • Tip:若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view。
  • Tip:scroll-into-view、scroll-top、scroll-left 需要在页面数据高度(或宽度)撑开时生效,若有异步加载数据,请在数据渲染完成时,重新动态赋值,才可生效。
  • Tip:在设置 scroll-view 组件 height 属性不是内容可视区总高度时,使用 swan.pageScrollTo() API 无法生效。

参考示例

参考示例 1: 横向滚动套纵向滚动常用业务场景

在开发者工具中预览效果

  1. <view class="wrap">
  2. <view class="card-area">
  3. <view class="top-description border-bottom">推荐列表</view>
  4. <scroll-view
  5. scroll-x
  6. class="scroll-view"
  7. >
  8. <view class="flex">
  9. <scroll-view class="item" scroll-y s-for="item in list">
  10. <image class="image" src="{{item.src}}"></image>
  11. <view class="introduce">{{item.description}}</view>
  12. </scroll-view>
  13. </view>
  14. </scroll-view>
  15. </view>
  16. </view>

参考示例 2: 隐藏scroll-view的滚动条

在开发者工具中预览效果

  1. /* 添加此属性隐藏scroll-view的滚动条 */
  2. ::-webkit-scrollbar {
  3. width: 0;
  4. height: 0;
  5. color: transparent;
  6. }

参考示例 3: 竖向锚点示例

在开发者工具中预览效果

  1. <view class='scroll-box' style='height:{{ht}}px;'>
  2. <scroll-view scroll-y class='menu-tab' scroll-into-view="{{toView}}" scroll-with-animation="true">
  3. <view s-for="{{tabList}}" s-key="">
  4. <view class='item-tab {{item.checked ? "item-act":""}}' id="t{{index}}" data-index="{{index}}" bindtap='intoTab'>{{item.title}}</view>
  5. </view>
  6. </scroll-view>
  7. <scroll-view scroll-y style='height:{{ht}}px;'
  8. scroll-with-animation="true"
  9. bindscrolltoupper="upper"
  10. bindscrolltolower="lower"
  11. bindscroll="scrollRight"
  12. scroll-into-view="{{toViewRt}}">
  13. <view s-for="{{contList}}" s-key="">
  14. <view class='cont-box' id="t{{index}}" style='height:{{ht}}px;'>{{item.cont}}</view>
  15. </view>
  16. </scroll-view>
  17. </view>
var app = getApp();

Page({
    data: {
        current: 0, 
        // 左侧菜单
        tabList: [
            { title: 'tab1', checked: true },
            { title: 'tab2', checked: false },
            { title: 'tab3', checked: false },
            { title: 'tab4', checked: false },
            { title: 'tab5', checked: false },
            { title: 'tab6', checked: false }
        ],
        // 右侧内容
        contList: [
            { cont: 'tab1'},
            { cont: 'tab2'},
            { cont: 'tab3'},
            { cont: 'tab4'},
            { cont: 'tab5'},
            { cont: 'tab6'}
        ],
    },

    // 循环切换
    forTab(index) {
        let lens = this.data.tabList.length;
        let _id = 't' + index;
        for (let i = 0; i < lens; i++) {
        this.data.tabList[i]['checked'] = false;
    }
    this.data.tabList[index]['checked'] = true;
        this.setData({
            tabList: this.data.tabList,
            toView: _id,
            current: index
        });
    },

    // 点击左侧菜单栏
    intoTab(e) {
        let lens = this.data.tabList.length;
        let _index = e.currentTarget.dataset.index;
        this.forTab(_index);
        let _id = 't' + _index;
        this.setData({
            toViewRt: _id
        });
    },

    // 滚动右侧菜单
    scrollRight(e) {
        //console.log(e)
        let _top = e.detail.scrollTop;
        let progress = parseInt(_top / this.data.ht); // 计算出 当前的下标
        if (progress > this.data.current) { // 向上拉动屏幕

        this.setData({ current: progress });
        this.forTab(this.data.current);
    } else if (progress == this.data.current) {
        return false;
    } else { // 向下拉动屏幕
        this.setData({
            current: progress == 0 ? 0 : progress--
        });
            this.forTab(progress);
        }
    },

    onLoad: function (options) {
        console.log(this.data.tabList)
        // 框架尺寸设置
        swan.getSystemInfo({
            success: (options) => {
                var wd = options.screenWidth; // 页面宽度
                var ht = options.windowHeight; // 页面高度
                this.setData({ wd: wd, ht: ht })
            }
        });
    },

    onShow: function () {
        // 初始化状态
        this.setData({
            toView: 't' + this.data.current,
            toViewRt: 't' + this.data.current
        })
    }
})