微信小程序—上拉加载+api交互显示loading提示框

新建scroll目录=》新建scrollPage
1、scroll.wxml

view id="container"  scroll-view    scroll-y="true" // 允许纵向滚动    scroll-top="{{scrollTop}}" // 滚动轴的位置，用于返回顶部    scroll-with-animation="true" // 返回顶部的动画    bindscroll="scrollFn" // 滚动时触发事件    bindscrolltolower="scrollToLower" // 滚动到底部时触发事件，必须给scroll-view设置高度，不然无法触发      view class="cont" wx:key="{{index}}" wx:for="{{list}}"      text{{item}}/text    /view    view bindtap="backFn" class="back" wx:if="{{isShow}}"返回顶部/view     // 绑定事件返回顶部，wx:if用来控制隐藏和显示  /scroll-view/view

2、scroll.wxss

#container{  width: 100%;  position: absolute;  top: 0;  bottom: 0;}#container scroll-view{  width: 100%;   height: 100%;  /* 必须设置高度，不然bindscrolltoupper不生效 */  position: relative;}#container scroll-view .cont{  width: 100%;  height: 30rpx;  border-bottom: 1rpx solid #ccc;  padding: 60rpx;   font-size: 30rpx;}.back{  width: 80rpx;  height: 100rpx;  text-align: center;  background: red;  color: #FFF;  position: fixed;  right: 0;  bottom: 0;}

3、js

data: {    list: [],    page: 1, // 起始页数，第一页    isShow: false, // 返回顶部的显示和隐藏    scrollTop: '', // 竖向滚动轴的高度，用来返回顶部  },  onLoad: function (options) {     // 页面一加载就循环出10条信息（第一页）    for (var i = 0; i  this.data.page*10; i++) {      this.setData({list: this.data.list.concat(i)}) // 在原有数组上新增元素    }  },  scrollFn: function (e) { // 获取滚动高度，控制返回顶部view的显示和隐藏    if (e.detail.scrollTop  120) { // 如果滚动高度大于120.则显示返回顶部view      this.setData({isShow: true})    } else {      this.setData({isShow: false})    }  },  backFn: function () { // 返回顶部    this.setData({scrollTop: 0}) // 滚动轴距离顶部的距离为0.来实现返回顶部效果  },  scrollToLower: function () { // 向底部滚动    this.showLoading() // 调用显示loading提示框    this.setData({page: this.data.page+1})     // 每次触发该时间都让页数增加    if (this.data.page  10) { // 假设只有10页内容，进行判断      console.log('没有更多了') // 如果加载到第10页    } else { // 如果没有加载到第10页      setTimeout(() = { // 做个延迟效果        for (var i = (this.data.page - 1) * 10; i  this.data.page * 10; i++) { // 从上一页的结束部分开始          this.setData({ list: this.data.list.concat(i) })          // 用新增元素的数组来代替原有数组        }        wx.hideLoading() // 数据加载完成之后隐藏loading提示框      }, 1000)    }  },  showLoading: function () { // api交互，显示loading提示框    wx.showLoading({      title: '加载中',    })  }  }

效果：
初始效果：

滚动120rpx的效果：

滚动加载数据的效果：

点击返回顶部的效果：