如何为我们的微信小程序添加上拉加载和下拉刷新功能

// 第一步的话就是在我们对应的json页面中添加我们的需要的依赖：

然后的话就是在我们的js文件中添加我们的代码：
首先的话我们要有我们的网络请求的代码：

具体的代码如下：

// todo 在我们的这个位置的话就是设置我们的网络请求得代码
export const request=(params)=>{
    // 在我们的这个位置的话定义我们的公共的url
    const baseUrl ='https://api-hmugo-web.itheima.net/api/public/v1';

    return new Promise((resolve,reject)=>{
      wx.request({
          // todo 解构函数
        ...params,
        // 在我们的这个位置的恶化就是进行我们的代码的拼接
        url:baseUrl+params.url,
        // 成功后接收返回值然后的话将我们的返回值放到我们的resolve里面
        success:(result)=>{
            // 我们的这个resolve的话就等于我们请求成功的值 
            resolve(result.data.message);
        },
        fail:(err)=>{
            reject(err);
        }
      });  
    })
}

然后的话就是回到我们的wxml文件就是我们的wxml的页面布局文件编写我们的代码：

<SearchInput></SearchInput>
<!-- 监听我们的自定义事件tabsItemChange
     事件名等于我们的这样的一个回调
 -->
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
  <block wx:if="{{tabs[0].isActive}}">
    <!-- 在我们的这个位置的话就是设置添加我们的相关的方法 -->
    <view class="first_tab">
      <!--在我们的这个位置的话添加我们的才超链接标签  -->
      <navigator
        class="goods_item"
        wx:for="{{goodsList}}"
        wx:key="goods_id"
      >
        <!--第一个的话是我们左边的图片容器  -->
        <view class="goods_img_wrap">
          <!-- 在我们的这个位置的话就是设置我们的图片 -->
          <image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg'}}" />
        </view>
        <!-- 第二个的话是我们的右边商品容器结构 -->
        <view class="goods_info_wrap">
          <!-- 现在的话就是设置我们的右边的标签 -->
          <view class="goods_name">{{item.goods_name}}</view>
          <view class="goods_price">￥:{{item.goods_price}}</view>
        </view>
      </navigator>
    </view>
  </block>
  <block wx:elif="{{tabs[1].isActive}}">2</block>
  <block wx:elif="{{tabs[2].isActive}}">3</block>
</Tabs>

然后的话就是编写我们的页面的css文件在我们的这个位置的话我们使用less的方式来进行编写：在使用我们的less前要在我们的vscode中安装我们的插件： easy less

然后的话这里的话就是我们的详细的代码：

// 在我们的这个位置的话就是设置我们的相关的方法
.first_tab{
    // 在我们的这个位置的话就是设置我们的超链接
    .goods_item{
        // 在我们的这个位置的话就是设置我们的方法
        display: flex;
        border-bottom:1rpx solid #ccc;
        .goods_img_wrap{
            flex: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            image{
                width: 70%;

            }
        }
        .goods_info_wrap{
            flex: 3;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .goods_name{
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-align:vertical;
                // 在我们的第几行显示的话就是写几
                -webkit-line-clamp: 2; 

            }
            // 在我们的这个位置的话就是设置我们的自己的样式给我们的价格
            .goods_price{
                color: rgb(0, 60, 255);
                font-size: 32rpx;


            }
        }
    }
}

然后的话就是我们的less自动生成的css文件：

.first_tab .goods_item {
  display: flex;
  border-bottom: 1rpx solid #ccc;
}
.first_tab .goods_item .goods_img_wrap {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.first_tab .goods_item .goods_img_wrap image {
  width: 70%;
}
.first_tab .goods_item .goods_info_wrap {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.first_tab .goods_item .goods_info_wrap .goods_name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-align: vertical;
  -webkit-line-clamp: 2;
}
.first_tab .goods_item .goods_info_wrap .goods_price {
  color: #003cff;
  font-size: 32rpx;
}

然后的话就是我们的就是文件在下面的话就是我们的js文件的代码截图：

// pages/goods_list/index.js
/**
 * 在我们的微信小程序官方的开发文档中寻找
 * 用户上滑动页面，滚动条触底开始加载下一页的数据
 * 1： 找到我们的滚动条事件，当我们的事件触发的时候的话加载我们的下一页数据
 * 2： 判断还有没有下一页的数据
 *     1:  获取到总页数
 *           这里的话涉及到我们的计算公式
 *           总页数 = Math.ceil(总条数 / 页容量(pagesize));
 *                   math.ceil(23/10)=3
 *     2： 获取到当前的页码 
 *     3： 判断一下，当前页码是否大于等于总页数
 *         表示没有下一页数据否则的话。
 *         就表示有下一页的数据。
 * 3： 假如没有下一页的数据，发出一个提示
 *       // 判断：------》 
 * 4： 假如还有下一页的数据，来加载我们的下一页数据
 *       1： 当前的页码++
 *       2： 重新发送请求
 *       3： 数据请求回来了， 要对data中的数据进行数组的拼接而不是全部的替换
 * 
 * 第二个大的需求下拉刷新事件，重置我们的数组
 *       1: 触发下拉刷新页面，需要在页面的json文件中开始一个配置项
 *             // 在我们的json文件中添加我们的enablePullDownRefresh
 *             找到触发下拉刷新的事件在里面添加逻辑
 *       2：重置数据
 *       3：重置页码为1 
 *       4: 重现发送请求
 *       5: 数据请求回来了需要手动的关闭等待效果
 */

import { request } from "../../request/index.js";
import regeneratorRuntime from  '../lib/runtime/runtime';
Page({

  data: {
     // 在我们的这个位置的话定义我们的数组
     tabs:[
       {
         id:0,
         value:"综合",
         isActive:true
       },
       {
        id:1,
        value:"销量",
        isActive:false
      },
      {
        id:2,
        value:"价格",
        isActive:false
      },
     ],
     //我们的商品列表--------------创建我们的数组存储我们的数据,然后的话给我们的数组赋值
     goodsList:[]

  },
  // todo_new ---------> 我们的商品列表的请求页面,接口要的参数
  QueryParams:{
       query:'',
       cid:"",
       // 这个的话就是我们的页码
       pagenum:1,
       // 这个的话是我们的页面的数据每页请求10条的数据
       pagesize:10,
  },
  // 设置我们的下拉加载------》 全局变量 ------》 总页数
  totalPages:1,

  /**
   * 生命周期函数--监听页面加载
   */
  //我们的商品列表的代码
  onLoad: function (options) {
      // todo 打印输出我们的东西，就是拿到我们上一个页面传递过来的cid
      console.log(options);
      // 给我们上面的cid赋值
      this.QueryParams.cid=options.cid;
      // 在我们的这个位置的话调用我们的方法
      this.getGoodsList();
  },
  // todo ----------> 在我们的这个位置的话获取我们商品列表的数据
  // todo ----------> 头部加上我们的async表示我们的请求是同步的，我们的商品列表
 async getGoodsList(){
    // 在我们的这个位置的话发送我们的请求使用我们班的es7
    const res = await request({url:"/goods/search",data:this.QueryParams});
    // 下拉加载--------》 在我们的这个位置的话就是获取我们的总条数
    const total = res.total;// 因为我们的total要在我们的另外的一个方法来使用所以将它变成一个全局参数
    // 下拉加载--------》计算我们的总页数
    this.totalPages = Math.ceil(total/this.QueryParams.pagesize);
    console.log( this.totalPages);
  
    this.setData({
      // goodsList:res.goods 之前的数据添加方式
      // 在设置我们的下拉加载后的数据拼接方式数组解构拼接es6
      goodsList:[...this.data.goodsList,...res.goods]

    })
    // 关闭下拉刷新的窗口
    wx.stopPullDownRefresh();
    console.log(res);
  },

  // 这个的话就是相当于是我们的标题的点击事件，从我们的子组件中传递过来
  handleTabsItemChange(e){
    // console.log(e);
    // 1： 获取被点击的标题索引
    const {index} = e.detail;
    // 2： 修改我们的原数组，让他产生
    let {tabs} = this.data;
    tabs.forEach((v,i)=> i === index?v.isActive=true:v.isActive=false);
    // 将我们的值赋值到data中就好了
    this.setData({
      tabs
    })
  },
  /*
   * 添加我们的页面上滑动事件也叫滚动条触底事件
   * 
   */
  onReachBottom(){
        //  console.log("页面触底");
        // 判断还有没有下一页的数据
        if(this.QueryParams.pagenum >= this.totalPages){
          // 没有下一页的数据
          // console.log("没有下一页的数据");
          wx.showToast({
            title: '没有下一页的数据',
          
          });
        }else{
          //还有下一页的数据
          // console.log("还有下一页的数据");
          this.QueryParams.pagenum++;
          this.getGoodsList(); // 数据的调用
        }
  },
  // 下拉刷新事件
  onPullDownRefresh(){
    // console.log("刷新");
    this.setData({
      // 1:todo ----------->重置我们的数组
      goodsList:[]
    })
     // 2:todo ----------->重置我们的页码
     this.QueryParams.pagenum = 1;
     // 3:todo ----------->重新发送请求
     this.getGoodsList();
  }
  
})

然后的话就是我们的实现的效果的展示：
以下的话就是我们的上拉刷新功能：

一下的话就是我们的下拉加载功能：