ウィジェットscroll-viewスクロールリフレッシュデータ増加swiper切替


scroll-view前編をご覧ください
シーン:
データ量が多い場合は、まずデータの一部をロードし、スクロール更新データを監視する必要があります.
解決:
この場合、scroll-viewが提供するインタフェースを使用してスクロール状況を監視できます.
WeChatの公式ドキュメントには、lower-thresholdとbindscrolltoolowerが提供されており、処理が右/下に滑った場合を監視しています.
コードは次のとおりです.
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 }) }})