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

scroll-view请看上一篇

场景：

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

解决：

  这时候可以使用 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 }) }})