百度智能小程序 可滾動視圖區(qū)域

scroll-view 可滾動視圖區(qū)域

解釋：可滾動視圖區(qū)域，可實現(xiàn)橫向滾動和豎向滾動。使用豎向滾動時，需要給定一個固定高度，可以通過 css 來設(shè)置 height。

屬性說明

示例

在開發(fā)者工具中打開

<view class="wrap">
    <view class="card-area">
        <view class="top-description">縱向滾動</view>
        <scroll-view
            class="scroll-view"
            scroll-y
            upper-threshold="1"
            lower-threshold="1"
            scroll-top="{= scrollTop =}"
            scroll-into-view="{= scrollIntoView =}"
            scroll-with-animation="true"
            enable-back-to-top="true"
            bindscrolltoupper="upper"
            bindscrolltolower="lower"
            bindscroll="scroll">
            <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>
</view>

const order = ['one', 'two', 'three'];
Page({
    data: {
        scrollIntoView: 'one',
        scrollTop: 0,
        scrollLeft: 0
    },
    upper() {
        swan.showToast({
            title: '到頂了',
            icon: 'none'
        });
    },

    lower() {
        swan.showToast({
            title: '到底了',
            icon: 'none'
        });
    },

    scroll(e) {
        console.log('獲取滾動事件的詳細(xì)信息e.detail：', 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.scrollIntoView) {
                const next = (i + 1) % order.length;
                this.setData({
                    scrollIntoView: order[next],
                    scrollTop: next * 500,
                });
                break;
            }
        }
    },
    tapMove() {
        this.setData({
            scrollTop: this.data.scrollTop + 10,
        });
    }
});

代碼示例 2：橫向滾動

<view class="wrap">
    <view class="card-area">
        <view class="top-description">橫向滾動</view>
        <scroll-view
            class="scroll-view"
            scroll-x
            bindscrolltoupper="toLeft"
            bindscrolltolower="toRight"
            scroll-left="{= scrollLeft =}"
            upper-threshold="1"
            lower-threshold="1"
            bindscroll="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>
</view>

Page({
    data: {
        scrollLeft: 0
    },

    toLeft() {
        swan.showToast({
            title: '到最左邊了',
            icon: 'none'
        });
    },
    toRight() {
        swan.showToast({
            title: '到最右邊了',
            icon: 'none'
        });
    },
    scroll(e) {
        console.log('獲取滾動事件的詳細(xì)信息e.detail：');
        console.dir(e.detail);
        this.setData({
            scrollTop: e.detail.scrollTop
        })
    }
});

Bug & Tip

• Tip：請勿在 scroll-view 中使用 textarea、map、canvas、video 組件；更多請看 原生組件說明。
• Tip：scroll-into-view 的優(yōu)先級低于 scroll-top、scroll-left。Bug：在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發(fā) onPullDownRefresh。
• Tip：若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view。
• Tip：scroll-into-view、scroll-top、scroll-left 需要在頁面數(shù)據(jù)高度（或?qū)挾龋伍_時生效，若有異步加載數(shù)據(jù)，請在數(shù)據(jù)渲染完成時，重新動態(tài)賦值，才可生效。
• Tip：在設(shè)置 scroll-view 組件 height 屬性不是內(nèi)容可視區(qū)總高度時，使用 swan.pageScrollTo() API 無法生效。

參考示例

參考示例 1： 橫向滾動套縱向滾動常用業(yè)務(wù)場景

在開發(fā)者工具中打開

<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 的滾動條 

在開發(fā)者工具中打開

/* 添加此屬性隱藏scroll-view的滾動條 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

參考示例 3: 豎向錨點示例

在開發(fā)者工具中打開

<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, 
        // 左側(cè)菜單
        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 }
        ],
        // 右側(cè)內(nèi)容
        contList: [
            { cont: 'tab1'},
            { cont: 'tab2'},
            { cont: 'tab3'},
            { cont: 'tab4'},
            { cont: 'tab5'},
            { cont: 'tab6'}
        ],
    },

    // 循環(huán)切換
    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
        });
    },

    // 點擊左側(cè)菜單欄
    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
        });
    },

    // 滾動右側(cè)菜單
    scrollRight(e) {
        //console.log(e)
        let _top = e.detail.scrollTop;
        let progress = parseInt(_top / this.data.ht); // 計算出 當(dāng)前的下標(biāo)
        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)
        // 框架尺寸設(shè)置
        swan.getSystemInfo({
            success: (options) => {
                var wd = options.screenWidth; // 頁面寬度
                var ht = options.windowHeight; // 頁面高度
                this.setData({ wd: wd, ht: ht })
            }
        });
    },

    onShow: function () {
        // 初始化狀態(tài)
        this.setData({
            toView: 't' + this.data.current,
            toViewRt: 't' + this.data.current
        })
    }
})

常見問題

Q： scroll-view 的 scroll-top 設(shè)置是否是無效的

A：使用豎向滾動時，需要給 <scroll-view> 一個固定高度，通過 CSS 設(shè)置 height。

代碼示例

<view class="wrap">
    <view class="card-area">
        <view class="top-description">縱向滾動</view>
        <scroll-view
            scroll-y
            style="height: 1.66rem;"
            scroll-into-view="{= toView =}"
            scroll-top="{= scrollTop =}"
        >
            <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="scrollToTop" bindtap="scrollToTop">回頂部</view>
        </view>
    </view>
</view>

Page({
    data: {
        toView: 'three',
        scrollTop: 0,
    },
    scrollToTop(e) {
        console.log(e);
        this.setData({ scrollTop: 0 });
    }
});