場景：

  在資料量很多的情況下，我們需要首先載入一部分資料，之後監測滾動更新資料

解決：

  這時候可以使用 scroll-view 提供的介面來監控滾動情況

  微信官方文件<scroll-view>裡面提供了lower-threshold與bindscrolltolower來監控處理滑到到右邊/底部的情況

程式碼如下

view

<view class="table">
  <view class="tr">
    <view class="th" wx:for="{{th}}">{{item}}</view>
  </view>
  <view class="scrollView">
    <scroll-view scroll-y lower-threshold='1' bindscrolltolower="scrollBottom">
      <view class="tr" wx:for="{{data}}">
        <view class="td">{{item.user_name}}</view>
        <view class="td">{{item.user_points}}</view>
      </view>
      <view class="tr {{hasMore ? 'hasMore' : ' '}}">
        <view class="td">沒有更多資料了</view>
      </view>
    </scroll-view>
  </view>
</view>
 

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頁面中 

<scroll-view>的lower-threshold值預設為50

這時候需要把他修改的越小越好，最好為1或者0，不然會出現滑動多次觸發函式的情況。

more

既然都做到這樣了，不如再加上個滑動切換吧

這時候吧swiper元件也加上好了

view

<view class="tabBar">
  <view id="{{index}}" class="tabBtn" wx:for="{{tabData}}" bindtap="tabChange">{{item}}</view>
  <view class="active" style="left:{{activeIndex*50}}%"></view>
</view>
<swiper current="{{activeIndex}}" bindchange="swiperChange">
  <swiper-item>
    <view class="tablebox">
      <view class="tr">
        <view class="th">時間</view>
        <view class="th">賬號</view>
      </view>
      <view class="scrollView" id="scrollView" style="{{style}}">
        <scroll-view scroll-y>
          <view class="tr" wx:for="{{data01}}">
            <view class="td">{{item.time}}</view>
            <view class="td">{{item.phone}}</view>
          </view>
        </scroll-view>
      </view>
    </view>
  </swiper-item>
  <swiper-item>
    <view class="tablebox">
      <view class="tr">
        <view class="th">時間</view>
        <view class="th">賬號</view>
      </view>
      <view class="scrollView" style="{{style}}">
        <scroll-view scroll-y>
          <view class="tr" wx:for="{{data02}}">
            <view class="td">{{item.time}}</view>
            <view class="td">{{item.phone}}</view>
          </view>
        </scroll-view>
      </view>
    </view>
  </swiper-item>
</swiper>
 

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 }) }})