Scroll-view

Scroll-view
一、使用方法

当在容器内放置一个很大的组件时，我们期望容器具有滚动的功能，例如我们在浏览网页的时候，必须滚动才可以看到全部内容。小程序提供了scroll-view组件，可以实现横向、纵向滚动，它的自定义属性如下：

默认的情况下，scrollview没有滚动效果，也可以同时设置横向和纵向滚动。在使用过程中，经常会用到scroll-into-view来设置当前滚动条的位置，注意在滚动视图中的子控件id不能用数字开头。
二、案例

下面的案例演示纵向滚动：在scrollview中放置6张图片，点击按钮可以滚动到顶部、底部，或者滚动到某个图片。同时监听滚动视图的事件

1、wxml
    <view class="container">
        <scroll-view class='scroll1' scroll-x='{{false}}' scroll-y='{{true}}' upper-threshold='50' lower-threshold='50' scroll-top='{{scrollTop}}' scroll-into-view='{{scrollIntoView}}' scroll-with-animation='{{true}}' bindscrolltoupper='toUpper' bindscrolltolower='toLower'
            bindscroll='scroll'>
            <block wx:for='{{img}}'>
                <image src='{{item}}' class='img' id='img{{index}}'></image>
            </block>
        </scroll-view>
        <button class='btn' bindtap='onClick' id='btn1'>点击我回到顶部</button>
        <button class='btn' bindtap='onClick' id='btn2'>点击我回到底部</button>
        <button class='btn' bindtap='onClick' id='btn3'>点击我移动一个图片</button>

        <view class="container">
            <scroll-view class='scroll2' scroll-x='{{true}}' scroll-y='{{false}}' upper-threshold='50' lower-threshold='50' scroll-left='{{scrollLeft}}' scroll-into-view='{{scrollIntoView}}' scroll-with-animation='{{true}}' bindscrolltoupper='toUpper' bindscrolltolower='toLower'
                bindscroll='scroll'>
                <block wx:for='{{img}}'>
                    <image src='{{item}}' class='img' id='img{{index}}'></image>
                </block>
            </scroll-view>
            <button class='btn' bindtap='onClick' id='btn1'>点击我回到顶部</button>
            <button class='btn' bindtap='onClick' id='btn2'>点击我回到底部</button>
            <button class='btn' bindtap='onClick' id='btn3'>点击我移动一个图片</button>
        </view>
    </view>


    2、wxss
    .container{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .scroll1{
        width: 500rpx;
        height: 500rpx;
    }
    .scroll2{
        width: 500rpx;
        height: 500rpx;
        white-space: nowrap;
    }
    .img{
        width: 700rpx;
        height: 300rpx;
    }

    
    3、js
    //index.js
    var i=0;

    Page({
        data: {
            img: [
                '/images/img1.jpg',
                '/images/img2.jpg',
                '/images/img3.jpg',
                '/images/img4.jpg',
                '/images/img5.jpg',
                '/images/img6.jpg'
            ],
            scrollTop: 0, 
            scrollLeft: 0,
            scrollIntoView: 'img0'
        },

        onLoad: function() {

        },
        //滚动到顶部事件监听
        toUpper: function(){
            console.log("滚动到顶部");
        },
        //滚动到底部事件监听
        toLower: function(){
            console.log("滚动到底部");
        },
        //滚动事件监听
        scroll: function(){
            console.log("正在滚动");
        },
        //按钮处理
        onClick: function(e){
            switch(e.currentTarget.id){
                case 'btn1':
                    //将滚动条的位置归0
                    this.setData({scrollTop: 0})
                    this.setData({scrollLeft: 0 })
                    break;
                case 'btn2':
                    //将滚动条的位置设置在最底部
                    this.setData({ scrollTop: 500 })
                    this.setData({ scrollLeft: 500 })
                    break;
                case 'btn3':
                    //设置scrollintoview为子元素id，注意此id不能以数字开头
                    i++;
                    var id='img'+i;
                    this.setData({scrollIntoView: id});
                    break;
                default:break;
            }
        }

    })

三、效果

四、百度网盘源码
链接: https://pan.baidu.com/s/1N7noj2fr0qiQg4s9-drXYw密码: 4yxm