微信小程序 下拉刷新 上拉加载

为了样式好看引入了lin-ui样式

书写wxml前段页面

<scroll-view class="scroll" bindscrolltolower="bottom" scroll-y="{{true}}" bindscrolltoupper="top">
<block wx:for="{{list}}">
  <l-card type="primary" l-img-class="right-card" position="right" image="{{item.pic}}" title="{{item.title}}" bindtap="listInfo" data-id="{{item.id}}">
  <view class="content">
    {{item.desn}}
  </view>
</l-card>
</block>
</scroll-view>

首先在onload中加载出第一页数据

  /**
   * 页面的初始数据
   */
  data: {
    page:1,
    list:[]
  },

 /**
   * 生命周期函数--监听页面加载
   * 加载出第一页数据
   */
  onLoad: function (options) {
    wx.request({
      url: 'http://www.exercise.com/word.php/index',
      success:(e)=>{
        let list=e.data.data
        this.setData({list:list})
      }
    })
  },

js中上拉加载事件

bottom(e){
    let that=this
    let page = this.data.page
    page++
    this.setData({page:page})
    wx.request({
      url: 'http://www.exercise.com/word.php/index',
      data:{
        page:page
      },
      success:(res)=>{
        // let list= e.data.data
        // this.setData({list:list})
        console.log(res);
        console.log(that.data.list);
        let list = res.data.data;
        if(list.length > 0){
          wx.showToast({
            title: '加载中....',
            icon:"loading",
            duration:99999
          });
          that.setData({
            list:[...that.data.list,...list]
          });
          wx.showToast({
            icon:"none",
            duration:100
          })
        }else{
          wx.showToast({
            title: '没有更多啦！',
            icon:"none",
            duration:2000
          })
        }
      }
    })
  },

下拉刷新

/**
   * 滑轮触碰顶部事件
   */
  top(e){
    wx.request({
      url: 'http://www.exercise.com/word.php/index',
      data:{
        page:1
      },
      success:(res)=>{
        let list = res.data.data;
        this.setData({list:list})
        wx.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1000
        })
      }
    })
  },