小程序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部分

   
  
    {{item}}
    

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