本文实例为大家分享了小程序实现分页查询列表的模板，供大家参考，具体内容如下
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',
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
