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

本文使用的是page页面事件处理函数 onPullDownRefresh() 下拉刷新 和 onReachBottom()上拉触底事件
进行数据上拉刷新和下拉加载。

demo3.json

{
        "navigationBarTitleText": "demo3",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true
}

demo3.js

// pages/demo3/demo3.js
var url = 'http://v.juhe.cn/toutiao/index?type=top&key=3dc86b09a2ee2477a5baa80ee70fcdf'
Page({

  /**
   * 页面的初始数据
   */
  data: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.request({
      url: url, //仅为示例，并非真实的接口地址
      data: {
        type: 'top',
        key: '3dc86b09a2ee2477a5baa80ee70fcdf5'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        that.setData({
          news: res.data.result.data,
        });
        console.log(res.data.result.data);
      },
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //显示刷新图标
    wx.showNavigationBarLoading();
    var that = this
    wx.request({
      url: url, //仅为示例，并非真实的接口地址
      data: {
        type: 'top',
        key: '3dc86b09a2ee2477a5baa80ee70fcdf5'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        that.setData({
          news: res.data.result.data,
        });
        console.log(res.data);
        // 隐藏导航栏加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      },
    })

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

    var that = this;
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })
    
    //隐藏加载图标
    setTimeout(function () {
    wx.request({
      url: url, //仅为示例，并非真实的接口地址
      data: {
        type: 'top',
        key: '3dc86b09a2ee2477a5baa80ee70fcdf5'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      
      success: function (res) {
        // 回调函数
        console.log(1111333);
        var newsMore = []
        //新的数据拼接旧的的数据
        newsMore = that.data.news.concat(res.data.result.data);
       // const oldData = that.data.news;
        that.setData({
          news: newsMore
        });
      }
    })
      //隐藏加载图标
      wx.hideLoading()
    }, 1000)

  },

})

demo3.wxml

<!--pages/demo3/demo3.wxml-->
<view class="">
  <block wx:for="{{news}}">
    <view class="content" catchtap="goNewsTap" data-title="{{item.title}}" data-url = "{{item.url}}">
    <image class="image" src="{{item.thumbnail_pic_s}}"></image>
    <image class="image" src="{{item.thumbnail_pic_s02}}"></image>
    <view class="xw" >
      <text class="title">{{item.title}}\n</text>
      <text class="author_name">{{item.author_name}}\n</text>
      <text class="date">{{item.date}}\n</text>
      <!-- <navigator url="{{item.url}}">详情</navigator> -->
    </view>
  </view>
  </block>  
</view>

demo3.wxss

/* pages/demo3/demo3.wxss */
.content{
 float: left
}
.content .image{
  float: left;
  height: 200rpx;
  width: 250rpx;
  margin-left: 10rpx
}
.xw{
  float: left;
  margin-left: 10rpx
}
.xw .title{
 font-weight: bolder;
}
.xw .date{
 margin-right: 50rpx
}

效果图：