scroll-view 可滚动视图区域

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

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例 1：纵向滚动

  1. <view class="wrap">    <view class="title">纵向滚动</view>    <scroll-view        scroll-y        class="scroll-view"        scroll-into-view="{= toView =}"        scroll-with-animation="true"        bind:scrolltoupper="upper"        bind:scrolltolower="lower"        upper-threshold="1"        scroll-top="{= scrollTop =}"        lower-threshold="1"        bind:scroll="myscroll"        enable-back-to-top="true"    >        <view id="one" class="color-a">A</view>        <view id="two" class="color-b">B</view>        <view id="three"  class="color-c">C</view>    </scroll-view>    <view class="page-section-btns">        <view class="next" bindtap="tap">下一页</view>        <view bindtap="tapMove">滚动</view>        <view class="scrollToTop" bindtap="scrollToTop">回顶部</view>    </view></view>
  1. const order = ['one', 'two', 'three'];Page({    data: {        toView: 'one',        scrollTop: 0,    },    upper() {        swan.showToast({            title: '到顶了',            icon: 'none'        });    },    lower() {        swan.showToast({            title: '到底了',            icon: 'none'        });    },    scroll(e) {        console.log('获取滚动事件的详细信息e.detail：');        console.dir(e.detail);        this.setData({            scrollTop: e.detail.scrollTop        })    },    scrollToTop(e) {        console.log(e);        this.setData({            scrollTop: 0,        });    },    tap(e) {        for (let i = 0; i < order.length; ++i) {            if (order[i] === this.data.toView) {                const next = (i + 1) % order.length;                this.setData({                    toView: order[next],                    scrollTop: next * 200,                });                break;            }        }    },    tapMove() {        this.setData({            scrollTop: this.data.scrollTop + 10,        });    }});

代码示例 2：横向滚动

  1. <view class="wrap">    <view class="title">横向滚动</view>    <scroll-view        scroll-x        class="scroll-view"        bind:scrolltoupper="toLeft"        bind:scrolltolower="toRight"        scroll-left="{= scrollLeft =}"        upper-threshold="1"        lower-threshold="1"        bind:scroll="scroll"    >        <view id="four" class="color-a row-view">A</view>        <view id="five" class="color-b row-view">B</view>        <view id="six" class="color-c row-view">C</view>    </scroll-view></view>
  1. const order = ['one', 'two', 'three'];Page({    data: {        scrollLeft: 'five'    },    toLeft() {        swan.showToast({            title: '到最左边了',            icon: 'none'        });    },    toRight() {        swan.showToast({            title: '到最右边了',            icon: 'none'        });    },    scroll(e) {        console.log('获取滚动事件的详细信息e.detail：');        console.dir(e.detail);        this.setData({            scrollTop: e.detail.scrollTop        })    }});

Bug & Tip

  • 原生组件说明。
  • -

    参考示例

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

    在开发者工具中预览效果
    1. <view class="wrap">     <view class="card-area">        <view class="top-description border-bottom">推荐列表</view>        <scroll-view            scroll-x            class="scroll-view"        >            <view class="flex">                <scroll-view class="item" scroll-y s-for="item in list">                    <image class="image" src="{{item.src}}"></image>                    <view class="introduce">{{item.description}}</view>                </scroll-view>            </view>        </scroll-view>    </view></view>

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

    在开发者工具中预览效果
    1. /* 添加此属性隐藏scroll-view的滚动条 */::-webkit-scrollbar {    width: 0;    height: 0;    color: transparent;}

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

    在开发者工具中预览效果
    1. <view class='scroll-box' style='height:{{ht}}px;'>    <scroll-view scroll-y class='menu-tab' scroll-into-view="{{toView}}" scroll-with-animation="true">        <view s-for="{{tabList}}" s-key="">            <view class='item-tab {{item.checked ? "item-act":""}}' id="t{{index}}" data-index="{{index}}" bindtap='intoTab'>{{item.title}}</view>        </view>    </scroll-view>    <scroll-view scroll-y style='height:{{ht}}px;'    scroll-with-animation="true"    bindscrolltoupper="upper"    bindscrolltolower="lower"    bindscroll="scrollRight"    scroll-into-view="{{toViewRt}}">        <view s-for="{{contList}}" s-key="">            <view class='cont-box' id="t{{index}}" style='height:{{ht}}px;'>{{item.cont}}</view>        </view>    </scroll-view></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’} ], },

  1. // 循环切换
  2. forTab(index) {
  3.     let lens = this.data.tabList.length;
  4.     let _id = 't' + index;
  5.     for (let i = 0; i < lens; i++) {
  6.     this.data.tabList[i]['checked'] = false;
  7. }
  8. this.data.tabList[index]['checked'] = true;
  9.     this.setData({
  10.         tabList: this.data.tabList,
  11.         toView: _id,
  12.         current: index
  13.     });
  14. },
  16. // 点击左侧菜单栏
  17. intoTab(e) {
  18.     let lens = this.data.tabList.length;
  19.     let _index = e.currentTarget.dataset.index;
  20.     this.forTab(_index);
  21.     let _id = 't' + _index;
  22.     this.setData({
  23.         toViewRt: _id
  24.     });
  25. },
  27. // 滚动右侧菜单
  28. scrollRight(e) {
  29.     //console.log(e)
  30.     let _top = e.detail.scrollTop;
  31.     let progress = parseInt(_top / this.data.ht); // 计算出 当前的下标
  32.     if (progress > this.data.current) { // 向上拉动屏幕
  34.     this.setData({ current: progress });
  35.     this.forTab(this.data.current);
  36. } else if (progress == this.data.current) {
  37.     return false;
  38. } else { // 向下拉动屏幕
  39.     this.setData({
  40.         current: progress == 0 ? 0 : progress--
  41.     });
  42.         this.forTab(progress);
  43.     }
  44. },
  46. onLoad: function (options) {
  47.     console.log(this.data.tabList)
  48.     // 框架尺寸设置
  49.     swan.getSystemInfo({
  50.         success: (options) => {
  51.             var wd = options.screenWidth; // 页面宽度
  52.             var ht = options.windowHeight; // 页面高度
  53.             this.setData({ wd: wd, ht: ht })
  54.         }
  55.     });
  56. },
  58. onShow: function () {
  59.     // 初始化状态
  60.     this.setData({
  61.         toView: 't' + this.data.current,
  62.         toViewRt: 't' + this.data.current
  63.     })
  64. }

}) ```