欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

05_微信小程序之scroll-view下拉刷新以及上拉加载

程序员文章站 2024-02-01 08:25:10
...

05_微信小程序之scroll-view下拉刷新以及上拉加载

一.布局确定

由于在微信小程序中,每一个xml节点会被自动加上page标签,而page标签默认是高度自适应,并且可以滑动的,所以为保证滑动不会冲突,在使用scroll-view时需要将page的宽高设置为100%,并且禁用page默认的滑动效果

page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

接下来只需要在xml文件中使用scroll-view,并将scroll-view的’scroll-y’属性设为true,scroll-view才具备垂直滚动的条件,当然如果您希望scroll-view横向滑动,那么只需要将scroll-view的’scroll-x’属性设为true即可。

注意:如果要求scroll-view纵向滑动,那么除了将’scroll-y’属性设为true之外,还需要保证scroll-view的高度是确定的,横向滑动也是同样的道理,需要保证scroll-view的宽度是确定的。

由于前面已经将page的高度确定为100%;只需要将scroll-view的高度设置为100%,scroll-view的高度也就被确定为屏幕的高度了,此时,当scroll-view中所有字节点的高度超出屏幕高度,scroll-view就可以滑动了。

page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-view {
  width: 100%;
  height: 100%;
}
<!--index.wxml-->
<scroll-view class="scroll-view" scroll-y="{{true}}">
  <!-- 此处省略n多个<view>wqwqwqw</view>节点 -->
</scroll-view>

05_微信小程序之scroll-view下拉刷新以及上拉加载

二.将scroll-view设置为可下拉

只需将scroll-view的’refresher-enabled’属性设为true,即可实现下拉效果

<!--index.wxml-->
<scroll-view class="scroll-view" scroll-y="{{true}}" refresher-enabled="{{true}}">
  <!-- 此处省略n多个<view>wqwqwqw</view>节点 -->
</scroll-view>

05_微信小程序之scroll-view下拉刷新以及上拉加载

三.处理下拉刷新的逻辑

这里先模拟下从pc分页请求数据的过程,一般情况下,我们向pc请求一个列表数据时,会向pc传递一个pageSize和start参数,告诉pc端每一页要给我多少条数据,并且我请求的是第几页的数据,pc在返回列表数据时,会把相应的列表数据返给我们,并通过totalCount告诉我们总共会有多少条数据。开始模拟吧!

  data: {
    list:[],
    serverDatas: [],
    pageSize: 20,
    totalPage: 1,
    start: 1
  },

  onLoad: async function(options) {
    var serverDatas = new Array();
    for(var i=0; i<101; i++) {
      serverDatas.push((i+1) + "")
    }
    this.setData({
      serverDatas: serverDatas
    })

    var list = await this.getList(1, 20)
    console.log(list)
    var list = await this.getList(2, 20)
    console.log(list)
    var list = await this.getList(3, 20)
    console.log(list)
    var list = await this.getList(4, 20)
    console.log(list)
    var list = await this.getList(5, 20)
    console.log(list)
    var list = await this.getList(6, 20)
    console.log(list)
  },

  getList: function(start, pageSize) {
    var serverDatas = this.data.serverDatas
    var totalCount = serverDatas.length

    var list = new Array()
    var length = start * pageSize >= serverDatas.length ? serverDatas.length : start * pageSize
    for(var i=(start - 1) * pageSize; i<length; i++) {
      list.push((i + 1) + "")
    }

    var result = {
      totalCount: totalCount,
      list: list
    }
    return new Promise(function (resolve, reject) {
      //模拟网络请求的耗时操作
      setTimeout(function () {
        resolve(result);
      }, 3000);
    });
  }

05_微信小程序之scroll-view下拉刷新以及上拉加载

网络请求的过程已经模拟完了,万事已具备,只欠逻辑实现了????

bindrefresherrefresh ==> loading设为true,调用接口,结束后loading设为false
最后将loading的值绑定给refresher-triggered属性即可

  data: {
    list:[],
    serverDatas: [],
    pageSize: 20,
    totalPage: 1,
    start: 1,
    loading: false
  },

  onLoad: async function(options) {
    var serverDatas = new Array();
    for(var i=0; i<101; i++) {
      serverDatas.push((i+1) + "")
    }
    this.setData({
      serverDatas: serverDatas
    })

    this.setData({
      loading: true
    })
  },

  getList: function(start, pageSize) {
    var serverDatas = this.data.serverDatas
    var totalCount = serverDatas.length

    var list = new Array()
    var length = start * pageSize >= serverDatas.length ? serverDatas.length : start * pageSize
    for(var i=(start - 1) * pageSize; i<length; i++) {
      list.push((i + 1) + "")
    }

    var result = {
      totalCount: totalCount,
      list: list
    }
    return new Promise(function (resolve, reject) {
      //模拟网络请求的耗时操作
      var timer = setTimeout(function () {
        resolve(result);
        clearTimeout(timer)
      }, 3000);
    });
  },

  refreshDatas: async function() {
    var pageSize = this.data.pageSize
    this.setData({
      loading:true
    })
    var result = await this.getList(1, pageSize)
    var list = result.list
    var totalCount = result.totalCount

    //计算总页数
    var totalPage = 1
    if (totalCount % pageSize > 0) {
      totalPage = Math.floor(totalCount / pageSize) + 1
    } else {
      totalPage = totalCount / pageSize
    }

    this.setData({
      loading: false,
      list: list,
      totalPage: totalPage
    })
  },

  onRefresh: function(e) {
    this.refreshDatas()
  }

05_微信小程序之scroll-view下拉刷新以及上拉加载

四.处理上拉加载更多数据的逻辑

bindrefresherrefresh => 请求下一页的数据,并追加到list中

<scroll-view class="scroll-view" scroll-y="{{true}}" refresher-enabled="{{true}}" bindrefresherrefresh="onRefresh" refresher-triggered="{{loading}}" bindscrolltolower="onReachBottom">
  <view class="list">
    <view wx:for="{{list}}">item{{item}}</view>
  </view>
</scroll-view>
/**index.wxss**/
page {
  width: 100%;
  height: 100%;
  overflow: none;
}

.scroll-view {
  width: 100%;
  height: 100%;
}

.list {
  width: 100%;
  //保证scroll-view中的子元素不能充满屏幕时,也能触发上拉加载
  height: calc(100vh + 10rpx);
}
  data: {
    list:[],
    serverDatas: [],
    pageSize: 20,
    totalPage: 1,
    start: 1,
    loading: false
  },

  onLoad: async function(options) {
    var serverDatas = new Array();
    for(var i=0; i<101; i++) {
      serverDatas.push((i+1) + "")
    }
    this.setData({
      serverDatas: serverDatas
    })

    this.setData({
      loading: true
    })
  },

  getList: function(start, pageSize) {
    var serverDatas = this.data.serverDatas
    var totalCount = serverDatas.length

    var list = new Array()
    var length = start * pageSize >= serverDatas.length ? serverDatas.length : start * pageSize
    for(var i=(start - 1) * pageSize; i<length; i++) {
      list.push((i + 1) + "")
    }

    var result = {
      totalCount: totalCount,
      list: list
    }
    return new Promise(function (resolve, reject) {
      //模拟网络请求的耗时操作
      var timer = setTimeout(function () {
        resolve(result);
        clearTimeout(timer)
      }, 3000);
    });
  },

  refreshDatas: async function() {
    var pageSize = this.data.pageSize
    this.setData({
      loading:true
    })
    var result = await this.getList(1, pageSize)
    var list = result.list
    var totalCount = result.totalCount

    //计算总页数
    var totalPage = 1
    if (totalCount % pageSize > 0) {
      totalPage = Math.floor(totalCount / pageSize) + 1
    } else {
      totalPage = totalCount / pageSize
    }

    this.setData({
      loading: false,
      list: list,
      totalPage: totalPage,
      start: 1
    })
  },

  onRefresh: function(e) {
    this.refreshDatas()
  },

  onReachBottom: function(e) {
    var that = this
    var timer = setTimeout(function() {
      that.loadDatas()
      clearTimeout(timer)
    }, 500)
  },

  loadDatas: async function() {
    var pageSize = this.data.pageSize
    var that = this
    var start = that.data.start
    var totalPage = that.data.totalPage

    start += 1

    if (start > totalPage) {
      return
    }

    wx.showLoading({
      title: '加载中',
    })
    var result = await this.getList(start, pageSize)
    var newList = result.list
    var totalCount = result.totalCount

    //计算总页数
    var totalPage = 1
    if (totalCount % pageSize > 0) {
      totalPage = Math.floor(totalCount / pageSize) + 1
    } else {
      totalPage = totalCount / pageSize
    }

    //追加数据
    var list = this.data.list
    for (var i = 0; i < newList.length; i++) {
      list.push(newList[i])
    }

    wx.hideLoading()

    this.setData({
      list: list,
      totalPage: totalPage,
      start: start
    })
  }

05_微信小程序之scroll-view下拉刷新以及上拉加载

相关标签: 微信小程序