Scroll-view

简介: Scroll-view一、使用方法 当在容器内放置一个很大的组件时,我们期望容器具有滚动的功能,例如我们在浏览网页的时候,必须滚动才可以看到全部内容。小程序提供了scroll-view组件,可以实现横向、纵向滚动,它的自定义属性如下: 属性名类型默认值说明scroll-xBooleanfalse允.

Scroll-view
一、使用方法

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

_2018_08_07_11_32_22

默认的情况下,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;
            }
        }

    })

三、效果
scroll_view_x

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

相关文章
|
1月前
|
JSON Android开发 数据格式
Android动态添加view设置view大小(宽高)
Android动态添加view设置view大小(宽高)
17 0
|
前端开发
使用scroll-view实现一个滑动列表
使用scroll-view实现一个滑动列表
183 1
使用scroll-view实现一个滑动列表
【布局 widget】Offstage 与 Visibility
【布局 widget】Offstage 与 Visibility
100 0
【布局 widget】Offstage 与 Visibility
在 fragment 中使用 Toolbar 的 menu
在 fragment 中使用 Toolbar 的 menu
view.setTag()的正确使用姿势
开发中,我们经常要进行数据的传递,会使用到view.setTag()和view.getTag()方法,主要用在view的点击事件中,可以让数据跟着view走,这种方法很方便。一般情况下给view设置一个tag就够用了,某些情况下我们需要给一个view设置多个tag,在需要的时候再分别取出来,这就需要用到view.setTag()的一个重载方法view.setTag(int key,final Object Tag)了。
|
前端开发
scroll-view实现不了滑动效果
scroll-view实现不了滑动效果
253 0
|
Android开发 索引 Java
Android NestedScrollView/ScrollView包裹ViewPager自适应高度
Android NestedScrollView/ScrollView包裹ViewPager自适应高度 当Android的NestedScrollView/ScrollView这类滚动View包裹ViewPager时候,V...
3857 0
|
前端开发 Java Spring
|
前端开发 Java Spring