小程序scroll-view上拉加载更多,下拉刷新数据

最新推荐文章于 2024-08-22 11:53:20 发布

qq_39389646

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量995

点赞数 1

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_39389646/article/details/105817747

版权

小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

小程序scroll-view上拉加载更多,下拉刷新数据

方法一

<scroll-view id="dialog_list" scroll-y="{{true}}" scroll-with-animation='{{true}}' scroll-top='{{scroll_top}}' scroll-into-view="{{toView}}" scroll-with-animation="true" enable-back-to-top="true" style="height:{{comment_bottom}};padding-top:16vh;" id="scroll-wrap">
  <view class="loading_view" wx:if="{{isLoading}}">
    <text class="subtext">正在载入更多...</text>
  </view>
  <view class="subtext" style="text-align:center;height: 50rpx;" wx:if="{{noMore}}">没有更多了~</view>
  <view id="inner-wrap" bindtouchstart="start_fn" bindtouchend="end_fn" class="singleDialog" wx:for="{{testMessageDetail}}" wx:key="item" wx:for-index="index">
  </view>
</scroll-view>

// start: 触摸开始
  start_fn(e) {
    let self = this;
    let touch_down = e.touches[0].clientY;
    this.data.touch_down = touch_down;
    // 获取 inner-wrap 的高度
    wx.createSelectorQuery().select('#inner-wrap').boundingClientRect(function (rect) {
      self.data.inner_height = rect.height;
    }).exec();

    // 获取 scroll-wrap 的高度和当前的 scrollTop 位置
    wx.createSelectorQuery().select('#scroll-wrap').fields({
      scrollOffset: true,
      size: true
    }, function (rect) {
      self.data.start_scroll = rect.scrollTop;
      self.data.height = rect.height;
    }).exec();
  },
  // start： 触摸结束
  end_fn(e) {
    let current_y = e.changedTouches[0].clientY;
    let that = this;
    var time = '';
    let { start_scroll, inner_height, height, touch_down } = this.data;
    if (current_y > touch_down && current_y - touch_down > 20 && start_scroll == 0) {
      // 下拉刷新 的请求和逻辑处理等
      if (!that.data.isCompleted) {
        that.setData({
          isLoading: true
        })
      }else{
        that.setData({
          noMore:true
        })
      }
    }else if (current_y < touch_down && touch_down - current_y >= 20 && inner_height - height == start_scroll) {
      // 上拉加载 的请求和逻辑处理等
      console.log('上拉加载')
    }
  },

方法二

<scroll-view scroll-y="true" bindscrolltolower="refrashList" class="notice_list" wx:if="{{noticeList.length!=0}}"></scroll-view>

refrashList: function() {
    if ((this.data.noticeTotal - pagePage * 10) > 0) {
      this.setData({
        allReady:false
      })
      pagePage++
      this.getAllNotice(pagePage);
    } else {
      wx.showToast({
        title: '没有更多了~',
        icon:'none'
      })
    }
  },
  getAllNotice: function(pagePage) {
    var userId = wx.getStorageSync('userId');
    var that = this
    wx.request({
      url: this.data.host + '/notice/user/page?userId=' + userId + '&page=' + pagePage + '&row=' + 10,
      method: 'get',
      success: function(e) {
        var noticeList = e.data.result.list;
        var newList = [];
        if (pagePage != 1) {
          newList = that.data.noticeList.concat(noticeList)
        } else {
          newList = noticeList
          noticeIndext = 0
        }
        while (noticeIndext < newList.length) {
          newList[noticeIndext].index = noticeIndext + 1;
          noticeIndext++;
          newList[noticeIndext-1].createUserName = decodeURIComponent(noticeList[noticeIndext-1].createUserName)
          newList[noticeIndext - 1].title = decodeURIComponent(noticeList[noticeIndext - 1].title)
          newList[noticeIndext - 1].content = decodeURIComponent(noticeList[noticeIndext - 1].content)
        }
        that.setData({
          allReady:true,
          loading:false,
          noticeList: newList,
          noticeTotal: e.data.result.total
        })
        console.log(noticeList)
      }
    })
  },