小程序 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 }) }})