以下將展示微信小程序之視圖容器scroll-view官方組件能力，組件樣式僅供參考，開發者可根據自身需求定義組件樣式，具體屬性參數詳見小程序開發文檔。
功能描述：
可滾動視圖區域。使用豎向滾動時，需要給scroll-view一個固定高度，通過 WXSS 設置 height。組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)。
屬性說明：
WebView
Skyline
組件差異
1. 默認只會渲染在屏節點，會根據直接子節點是否在屏來按需渲染，若只有一個直接子節點則性能會退化
2. 橫向滾動需打開 enable-flex 以兼容 WebView，如
3. 滾動條的長度是預估的，若直接子節點的高度差別較大，則滾動條長度可能會不準確
Bug & Tip
1. tip: 基礎庫 2.4.0以下不支持嵌套textarea、map、canvas、video 組件
2. tip: scroll-into-view 的優先級高于scroll-top
3. tip: 在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發onPullDownRefresh
4. tip: 若要使用下拉刷新，請使用頁面的滾動，而不是scroll-view ，這樣也能通過點擊頂部狀態欄回到頁面頂部
5. tip: scroll-view 自定義下拉刷新可以結合 WXS 事件響應 開發交互動畫
示例代碼：
JAVASCRIPT
const order = ['demo1', 'demo2', 'demo3']
Page({
? onShareAppMessage() {
? ? return {
? ? ? title: 'scroll-view',
? ? ? path: 'page/component/pages/scroll-view/scroll-view'
? ? }
? },
? data: {
? ? toView: 'green'
? },
? upper(e) {
? ? console.log(e)
? },
? lower(e) {
? ? console.log(e)
? },
? scroll(e) {
? ? console.log(e)
? },
? scrollToTop() {
? ? this.setAction({
? ? ? scrollTop: 0
? ? })
? },
? tap() {
? ? for (let i = 0; i < order.length; ++i) {
? ? ? if (order[i] === this.data.toView) {
? ? ? ? this.setData({
? ? ? ? ? toView: order[i + 1],
? ? ? ? ? scrollTop: (i + 1) * 200
? ? ? ? })
? ? ? ? break
? ? ? }
? ? }
? },
? tapMove() {
? ? this.setData({
? ? ? scrollTop: this.data.scrollTop + 10
? ? })
? }
})
WXML：
<view class="container">
? <view class="page-body">
? ? <view class="page-section">
? ? ? <view class="page-section-title">
? ? ? ? <text>Vertical Scroll\n縱向滾動</text>
? ? ? </view>
? ? ? <view class="page-section-spacing">
? ? ? ? <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
? ? ? ? ? <view id="demo1" class="scroll-view-item demo-text-1"></view>
? ? ? ? ? <view id="demo2"? class="scroll-view-item demo-text-2"></view>
? ? ? ? ? <view id="demo3" class="scroll-view-item demo-text-3"></view>
? ? ? ? </scroll-view>
? ? ? </view>
? ? </view>
? ? <view class="page-section">
? ? ? <view class="page-section-title">
? ? ? ? <text>Horizontal Scroll\n橫向滾動</text>
? ? ? </view>
? ? ? <view class="page-section-spacing">
? ? ? ? <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
? ? ? ? ? <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
? ? ? ? ? <view id="demo2"? class="scroll-view-item_H demo-text-2"></view>
? ? ? ? ? <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
? ? ? ? </scroll-view>
? ? ? </view>
? ? </view>
? </view>
</view>
WXSS：
.page-section-spacing{
? margin-top: 60rpx;
}
.scroll-view_H{
? white-space: nowrap;
}
.scroll-view-item{
? height: 300rpx;
}
.scroll-view-item_H{
? display: inline-block;
? width: 100%;
? height: 300rpx;
}
版權聲明：本站所有內容均由互聯網收集整理、上傳，如涉及版權問題，請聯系我們第一時間處理。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
