下拉刷新,上拉加载

微信小程序下拉刷新

我们可以利用<scroll-view></scroll-view>组件

属性有:

:

当我们想要做下拉刷新的时候,需要在.json文件里面配置

 "enablePullDownRefresh":true,
  "backgroundTextStyle":"dark"

 

当我们把.json里面的代配置好了,在上.js文件夹里面写下拉刷新  下拉刷新的事件 onPullDownRefresh(){}   

  // 接口要的参数
  QueryParams:{
    query:"",
    cid:"",
    pagenum:1,
    pagesize:10
  },  

/ 下拉刷新事件 
  onPullDownRefresh(){
    // 1 重置数组
    this.setData({
      goodsList:[]
    })
    // 2 重置页码
    this.QueryParams.pagenum=1;
    // 3 发送请求
    this.getGoodsList();
  }

我要也需要在data中定义 goodsList:[]方法

在配合使用下拉刷新就可以使用啦

上拉刷新

   我们使用  onReachBottom() 上划刷新

     当我们调用了接口,会有4个参数  query  cid   pagenum    pagesize 

我们在onReachBottom()里面判断有没有下一页的数据   如果没有我们使用

wx.showToast({

        title: '提示信息'

      });

来提示提示用户

如果有下一页数据就让  pagenum++  是页面第几页,有多少页

onReachBottom() {
    //  1 判断还有没有下一页数据
    if (this.QueryParams.pagenum >= this.totalPages) {
      // 没有下一页数据
      //  console.log('%c'+"没有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
      wx.showToast({
        title: '没有下一页数据'
      });

    } else {
      // 还有下一页数据
      //  console.log('%c'+"有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
      this.QueryParams.pagenum++;
      this.getGoodsList();
    }
  },

成功后的效果