小程序 下拉刷新 上拉加载

Posted 2020-10-28 Kuai Jiajin

微信小程序

下拉刷新 上拉加载，简单方便，易于上手。
1.首先上list.wxml代码

<!--pages/list/list.wxml-->
<view class="list-container">
  <view class="header">

  </view>
  <view class="doc-item"  wx:for="{{dataSource}}" wx:for-item="item" wx:key="{{item.id}}"  bindtap=‘bindViewTap‘ data-url="{{item.url}}" data-name="{{item.name}}">
    <text >{{item.title}}</text>
    <view class=‘item-info‘>
      <text>{{item.author}}</text>
      <text style=‘float: right‘>{{item.time}}</text>
    </view>
  </view>
  <view class="footer" wx:if="{{!hasMoreData}}">
    没有更多了
  </view>
  <view class="footer" wx:if="{{hasMoreData}}">
    加载中...
  </view>
</view>

2.再上js代码

// pages/list/list.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    id: "",
    dataSource: [],
    hasMoreData: true,
    pageIndex: 1,
    pageSize: 15,
    isLoading: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      id: options.id//从url上获取id
    })
    wx.setNavigationBarTitle({title: options.nav})
    this.getList(1)
  },
  getList: function(index){
    wx.request({
      url: ‘your server url‘,
      data: {
        method: ‘your method‘,
        pageSize: this.data.pageSize,
        pageIndex: index,
      },
      header: {
        ‘content-type‘: ‘application/json‘ // 默认值
      },
      success: (res) => {
        if(this.data.pageIndex == 1){
          wx.stopPullDownRefresh({
            complete: this.updateDom(res)
          })
        }else{
          this.updateDom(res)
        }

      }
    })
  },
  updateDom: function(res){
    this.setData({ dataSource: this.data.dataSource.concat(res.data.Data.List), isLoading: false })
    if (this.data.pageSize > res.data.Data.Length) {
      this.setData({ hasMoreData: false })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    if(!this.data.isLoading){
      this.setData({ hasMoreData: true, pageIndex: 1, dataSource: [], isLoading: true})
      this.getList(1)
    }

  },
  //事件处理函数
  bindViewTap: function (e) {
    //To do somethiing
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if(this.data.hasMoreData && !this.data.isLoading){
      this.setData({ pageIndex: this.data.pageIndex + 1, isLoading: true})
      this.getList(this.data.pageIndex)
    }

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {


  }
})

3.简单的list.wxss

/* pages/list/list.wxss */
page{
  background-color: #E6E6E6;
}
.header{
  text-align: center;
  font-size: 14px;
  color: #aaa;
}
.footer{
  text-align: center;
  padding-top: 36rpx;
  padding-bottom: 48rpx;
  font-size: 14px;
  color: #aaa;
}
.doc-item{
  padding: 24rpx 36rpx;
  margin: 12rpx 0;
  display: flex;
  background: white;
  flex-direction: column;
  border-bottom: 1px solid #e3e3e3;
}
.item-info{
  padding-top: 24rpx;
  font-size: 14px;
  color: #aaa;
}

4.list.json配置文件

{
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

至此，一个简单的下拉刷新上拉加载基本搞定了。巧用微信的各种Api，就很舒服。
继续扩展的话：
1.updateDom那里下拉刷新是简单的清空重新加载，其实可以进行数组比较插入最新记录；
2.出错提示没加；
3.可以使用腾讯开源框架Wepy这种现代化的类Vue框架进行组件化开发。