小程序实现分页查询列表的模板

本文实例为大家分享了小程序实现分页查询列表的模板，供大家参考，具体内容如下

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',
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于小程序实现分页查询列表的模板的详细内容...