小程序 scroll-view 滚动刷新数据 增加swiper切换

scroll-view请看上一篇

场景：

  在数据量很多的情况下，我们需要首先加载一部分数据，之后监测滚动更新数据

解决：

  这时候可以使用 scroll-view 提供的接口来监控滚动情况

  微信官方文档里面提供了lower-threshold与bindscrolltolower来监控处理滑到到右边/底部的情况

代码如下

view

  
    {{item}}
  
  
    
      
        {{item.user_name}}
        {{item.user_points}}
      
      
        没有更多数据了
      
    
  

js

Page({
  data: {
    th: ["账号", '积分'],
    hasMore: true,
    data: []
  },
  onLoad: function() {
    this.getData()
  },
  getData: function() {
    // 根据自身需要 与api交互获得数据
    wx.hideLoading()
  },
  scrollBottom: function() {
    var that = this
    if (that.data.hasMore) {
      wx.showLoading({
        title: '更多数据加载中',
        icon: 'loading'
      })
      that.getData()
    }
  }
})

在view页面中 

的lower-threshold值默认为50

这时候需要把他修改的越小越好，最好为1或者0，不然会出现滑动多次触发函数的情况。

more

既然都做到这样了，不如再加上个滑动切换吧

这时候吧swiper组件也加上好了

view

  {{item}}
  


  
    
      
        时间
        账号
      
      
        
          
            {{item.time}}
            {{item.phone}}
          
        
      
    
  
  
    
      
        时间
        账号
      
      
        
          
            {{item.time}}
            {{item.phone}}
          
        
      
    
  

js

Page({
  data: {
    tabData: ['已绑定手机客户', '未绑定手机客户'],
    activeIndex: 0,
    data01: [],
    data02: [],
    hasMore: true

  },

onLoad: function() { this.getData() this.getTop('#scrollView') }, getData: function() { // 根据自身需要 与api交互获得数据 wx.hideLoading() }, getTop: function(id) { var that = this wx.createSelectorQuery().select(id).boundingClientRect(function(rect) { console.log(rect) that.setData({ style: 'position: absolute;bottom: 0;width: 100%;top:' + rect.top + 'px' }) }).exec() }, scrollBottom: function() { var that = this if (that.data.hasMore) { wx.showLoading({ title: '更多数据加载中', icon: 'loading' }) that.getData() } }, tabChange(e) { console.log(e.currentTarget.id) let $index = parseInt(e.currentTarget.id) this.setData({ activeIndex: $index }) }, swiperChange(e) { console.log(e.detail.current) this.setData({ activeIndex: e.detail.current }) }})