小程序如何实现分页查询列表

本文小编为大家详细介绍“小程序如何实现分页查询列表”，内容详细，步骤清晰，细节处理妥当，希望这篇“小程序如何实现分页查询列表”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

list.wxml

<view class="home-main">
    <!-- 搜索 -->
    <view class="search-bar">
        <view class="search-bar-form">
            <image class="search-img" src="/images/search-icon.png"></image>
            <input class="search-input" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
        </view>
    </view>
    <!-- 列表 -->
    <view class="classify-list-all">
        <view wx:for="{{list}}" wx:key="id" data-item='{{item}}' class="classify-list flex align-center" bindtap="goClassify">
            <image class="classify-list-image" src="{{item.logo}}"></image>
            <view class="classify-list-main">
                {{item.name}}
            </view>
        </view>
    </view>
</view>

list.js

import Api from "../../../config/api";
import Http from "../../../utils/http";
Page({
  data: {
    formData: {
      size: 10,//分页，一页10条
      current: 1,//当前页数
    },
    isLast: false,//是否是最后一页
    list: [],//列表数组
  },
  onLoad() {
    //首次请求
    this.queryListPage();
  },
  onPullDownRefresh() {
    //下拉刷新
    this.setData({ 'formData.current': 1 });
    this.queryListPage();
  },
  onReachBottom() {
      //页面上拉触底事件的处理函数
    this.queryListPage();
  },
  goClassify(e) {
    wx.navigateTo({
      url: `/pages/home/classify/classify?id=${e.currentTarget.dataset.item.id}`,
    })
  },
  queryListPage() {
      //请求列表
    if (this.data.isLast) {
      return;
    };
    Http.request(Api.productQueryMyPage, this.data.formData, 'GET', true).then(res => {
      let arr = res.data || [];
      if (arr && arr.length > 0) {
        arr = arr.map(item => {
         //需要处理列表
         item.name = item.name + '处理后数据';
          return item;
        });
      } else {
        this.setData({
          isLast: true,
        });
      }
      let list = this.data.formData.current === 1 ? arr : this.data.list.concat(arr);
      let current = this.data.formData.current + 1;
      this.setData({
        list,
        'formData.current': current
      });
    });
  },
})

api.js

export default {
  /******* 商品信息 *******/
  productQueryMyPage: '/product/queryMyPage',//查询我的商品列表
}

http.js这个简单的封装的一下先凑合用，还不太完善

// import Api from "../config/api";
import Config from "../config/config";
function checkCode(res) {
  //401token过期 403表示这个接口是需要登录的。你没有权限访问
  if ([401, 403].includes(res.statusCode)) {
    wx.removeStorage({
      key: 'token',
      success() { 
        wx.switchTab({
          url: '/pages/my/my-main/my-main'
        });
      }
    })
  }
}
const http = {
  request(url, data, method, needLogin) {
    let header = {
      'content-type': 'application/json' // 默认值
    };
    if (needLogin) {
      const token = wx.getStorageSync('token');
      if (token) {
        header['Authorization'] = 'Bearer ' + token;
      }
    };
    return new Promise((resolve, reject) => {
      wx.request({
        url: Config.domain + url,
        data,
        method,
        header,
        success(res) {
          console.log(res);
          console.log(res.data);
          checkCode(res);
          resolve(res.data);
        },
        fail(res) {
          reject(res);
        }
      })
    })
  },
  uploadFile(url, filePath, formData, needLogin) {
    let header: any = {
      'content-type': 'multipart/form-data' // 默认值
    };
    if (needLogin) {
      const token = wx.getStorageSync('token');
      if (token) {
        header['Authorization'] = 'Bearer ' + token;
      }
    };
    return new Promise((resolve: any, reject: any) => {
      wx.uploadFile({
        url: Config.domain + url,
        filePath,
        name: 'files',
        formData,
        header,
        success(res) {
          debugger
          console.log(res);
          console.log(res.data);
          checkCode(res.statusCode);
          resolve(JSON.parse(res.data));
        },
        fail(res) {
          reject(res);
        }
      })
    })
  },

};
export default http;

config.js

export default {
  domain: 'http://www.test.com',
}

读到这里，这篇“小程序如何实现分页查询列表”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。