小程序scroll-view：功能與應用全解析

一、小程序scroll-view卡頓問題

1. scroll-view在滾動過程中，如果頁面複雜度比較高，滾動時會出現卡頓的問題。

2. 解決方案

// WXML部分

  

// JS部分
Page({
  data: {
    scrollWithAnimation: true,
    scrollHeight: 0
  },
  onLoad: function() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
  },
  scrollHandler: function() {
    // ...
  }
});

其中，scroll-view組件的scrollHeight屬性用於控制scroll-view可使用的高度；scrollWithAnimation屬性用於配置scroll-view在滾動時是否使用動畫效果。

此外，還可以在scroll-handler函數中處理滾動邏輯。如，攔截用戶的滾動操作。

二、微信小程序scroll-view

1. scroll-view是一個可滾動的區域，在小程序中常用於實現垂直或水平方向的滾動效果。同時，也可以使用scroll-left屬性實現水平滾動。

2. scroll-view經常和wx:for結合使用，實現列表視圖。

  {{item}}

三、小程序scroll-view高度問題

1. scroll-view的高度可以使用常規的px單位進行設置。

2. 如果需要實現自適應高度，則需要動態計算高度。

scrollHandler: function(e) {
  var that = this;
  wx.createSelectorQuery().selectAll('.list-item').boundingClientRect(function(rects) {
    var height = 0;
    rects.forEach(function(rect) {
      height += rect.height;
    });
    that.setData({
      scrollHeight: height
    });
  }).exec();
}

四、小程序scroll-view失效

1. scroll-view在部分情況下可能會失效，例如在swiper組件中嵌套scroll-view時，iOS設備上部分滑動事件會失效或被攔截。此時，需要禁用swiper中的滑動事件。

  
    
      
    
  
  
    
  

// JS部分
Page({
  data: {
    current: 0
  },
  swiperChange: function(e) {
    if(e.detail.current === 0) {
      // swiper滑動到第一個item，啟用scroll-view的滑動事件
      this.setData({
        current: e.detail.current,
        disableScroll: false
      });
    } else {
      // swiper滑動到其他item，禁用scroll-view的滑動事件
      this.setData({
        current: e.detail.current,
        disableScroll: true
      });
    }
  }
});

五、小程序scroll-view滾動

1. 可以在scroll-view組件中綁定scroll事件，響應用戶滾動行為。

// WXML部分

  

// JS部分
Page({
  scrollHandler: function(e) {
    console.log(e.detail.scrollTop);
  }
});

2. 可以在scroll-view組件上設置scroll-top屬性，將scroll-view滾動至指定位置。

  

// JS部分
Page({
  data: {
    scrollTop: 0
  },
  scrollTopHandler: function() {
    var that = this;
    that.setData({
      scrollTop: 100
    });
  }
});

六、小程序scroll-view滾動到指定位置

1. 可以在scroll-view組件中使用scroll-into-view屬性，指定滾動到某個具體的元素上。

  item-1
  item-2
  item-3
  item-4
  item-5

// JS部分
Page({
  data: {
    scrollIntoView: ''
  },
  scrollHandler: function() {
    // ...
  },
  scrollToViewHandler: function() {
    this.setData({
      scrollIntoView: 'item-3'
    });
  }
});

2. 在scroll-into-view屬性中可以指定某個元素的id，同樣是響應用戶操作，將scroll-view滾動到對應元素上。

七、小程序scroll-view嵌套

1. 小程序的scroll-view支持嵌套，但需要設置嵌套的父容器的高度。

// WXML部分

  {{item}}
  
    {{item}}
  

// CSS部分
.scroll-view2{
  height: 200px;
}

2. 在父級scroll-view和子級scroll-view中，需要進行相應的滑動事件綁定。

八、小程序scroll-view下拉刷新效果

1. 下拉刷新效果可使用scroll-view組件的lower-threshold屬性和bindscrolltolower事件，響應用戶下拉事件。

// WXML部分

  {{item}}

// JS部分
Page({
  lowerHandler: function() {
    // 載入更多內容
  }
});

2. 在lowerHandler函數中處理加在更多內容的邏輯。

九、小程序scroll-view渲染慢

1. scroll-view中的內容太多，如果一次性渲染，會導致頁面載入緩慢。

2. 解決方案：可以使用分頁載入的方式，每次只渲染部分數據。

// WXML部分

  = start && index {{item}}

// JS部分
Page({
  data: {
    start: 0,
    end: 10
  },
  scrollToUpper: function() {
    this.setData({
      start: this.data.end,
      end: this.data.end + 10
    });
    // ...
  }
});