小程序实现分类内容下拉刷新，上拉加载更多

效果演示：

小程序上拉加载更多，下来刷新，在项目开发中是最常见，以下是一个简单的案例，供大家参考

wxml文件代码:

<!--index.wxml-->
<view class="out">
  <!-- 项目 -->
    <view class='left'>
    <block wx:for="{{category}}">
      <view class='nav-item active'  wx:if="{{tags == item.id}}" data-id="{{item.id}}" bindtap="btn_cate">{{item.book_cate}}</view>
      <view wx:else data-id="{{item.id}}" data-id="{{item.id}}" bindtap="btn_cate" class='nav-item'>{{item.book_cate}}</view>
      </block>
    </view>
    <view class='right'>
      <view class='book-list'>
      <block wx:for="{{art}}">
        <view class='book-item' bindtap='book_detail' data-id="{{item.id}}" bindtap="change_book_d">
          <view class='bookimg'><image src='{{item.img}}' mode='widthFix'></image></view>
          <view class='bookname'>{{item.name}}</view>
          <view class='bookproject'>{{item.desc}}</view>
          <view class='bookdesc'>+在线阅读</view>
        </view>
       </block>
      </view>
    </view>
</view>

json文件代码："enablePullDownRefresh": true, 开启小程序下拉刷新

{  
"enablePullDownRefresh": true,
  "usingComponents": {}
 
}

js文件代码:

// pages/book/book.js
const app = getApp()
var page = 1; //设置默认页码
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    category: [],
    tags: '3',
    art: []
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.category(); //查询分类标签
    this.getArt();
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    var that = this;
    var tags = that.data.tags
    page = 1;
    wx.request({
      url: app.AppUrl + '/get_book/cate_name/' + tags + '?page=' + page,
      success: function (res) {
        that.setData({
          art: res.data.result,
        })
        // 隐藏导航栏加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      }
    })
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })
    // 页数+1
    page = page + 1;
 
    var that = this;
    var tags = that.data.tags
    wx.request({
      url: app.AppUrl + '/get_book/cate_name/' + tags + '?page=' + page,
      success: function (res) {
        var oldData = that.data.art; //获取旧的数据
        var newData = res.data.result; //获取旧的数据
        that.setData({
          art: oldData.concat(newData)
        })
        // 隐藏加载框
        wx.hideLoading();
      }
    })
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  },
  // 查询分类标签
  category: function () {
    var that = this
    wx.request({
      url: app.AppUrl + '/getbookcate',
      success(res) {
        that.setData({
          category: res.data.result,
        })
      }
    })
  },
  // 获取文章
  getArt: function () {
    var tags = this.data.tags;
    var that = this
    wx.request({
      url: app.AppUrl + '/get_book/cate_name/' + tags + '/page=' + page,
      success(res) {
        that.setData({
          art: res.data.result,
        })
      }
    })
  },
  // 点击获取分类文章
  btn_cate: function (e) {
    var tags = e.currentTarget.dataset.id
    var that = this
    that.setData({
      tags: tags
    })
    page = 1;
    wx.request({
      url: app.AppUrl + '/get_book/cate_name/' + tags + '?page=' + page,
      success(res) {
        that.setData({
          art: res.data.result,
        })
      }
    })
  }
})

wxss样式文件代码：

page{
   width: 100%;
   height: 100%;
}
 .out{
    width:100%;
    height:100%;
    display: flex;
    flex-direction:row-reverse;
}
.left{
   width:18%;
   height: 100%;
   border-right:2rpx solid #ccc;
   position: fixed;
   left: 0px;
   top: 0px;
}
.nav-item{
  text-align: center;
  font-size: 32rpx;
  padding: 30rpx 0;
}
.active{
  color: #fb7299;
  border-left:3px solid #fb7299;
  }
.right{
   width:76%;
   height: 100%;
   padding: 20rpx;
   text-align: center;
  
}
.book-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.book-item{
  width: 48%;
  margin: 10rpx 0;
  border:1rpx solid #ddd;
 
}
.bookimg{
  width: 100%;
}
.bookimg image{
  width: 100%;
  display: block;
  height: 612rpx;
}
.bookname{
    overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  font-size: 28rpx;
  text-align: left;
  padding: 5rpx 0;
  color: #333;
  font-weight: bold;
  padding-left: 15rpx;
   padding-right: 15rpx;
}
.bookproject{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  font-size: 20rpx;
  text-align: left;
  padding: 3rpx 0;
  color: #555;
  padding-left: 15rpx;
   padding-right: 15rpx;
}
.bookdesc{
    overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  text-align: right;
  font-size: 24rpx;
  color: #999;
  padding-bottom: 22rpx;
  padding-right: 15rpx;
  padding-top: 12rpx;
}