小程序?qū)崿F(xiàn)分頁查詢列表的模板
更新時(shí)間：2022年08月24日 11:08:17 作者：一際天涯
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)分頁查詢列表的模板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)分頁查詢列表的模板，供大家參考，具體內(nèi)容如下
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,//當(dāng)前頁數(shù)
? ? },
? ? isLast: false,//是否是最后一頁
? ? list: [],//列表數(shù)組
? },
? onLoad() {
? ? //首次請求
? ? this.queryListPage();
? },
? onPullDownRefresh() {
? ? //下拉刷新
? ? this.setData({ 'formData.current': 1 });
? ? this.queryListPage();
? },
? onReachBottom() {
? ?? ?//頁面上拉觸底事件的處理函數(shù)
? ? 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 + '處理后數(shù)據(jù)';
? ? ? ? ? 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這個(gè)簡單的封裝的一下先湊合用，還不太完善
// import Api from "../config/api";
import Config from "../config/config";
function checkCode(res) {
? //401token過期 403表示這個(gè)接口是需要登錄的。你沒有權(quán)限訪問
? 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' // 默認(rèn)值
? ? };
? ? 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' // 默認(rèn)值
? ? };
? ? 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',
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
理解返回函數(shù)的JavaScript函數(shù)是什么意思，通過幾個(gè)簡短的例子真正理解返回函數(shù)的JavaScript函數(shù)到底是什么？感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了antd?table長表格如何出現(xiàn)滾動條,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)電腦虛擬鍵盤的操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
使用JS將字符串保存成文件到本地(.txt、.json、.md)
工作中有時(shí)需要通過JavaScript保存文件到本地,下面這篇文章主要給大家介紹了關(guān)于使用JS將字符串保存成文件到本地的相關(guān)資料，分別包括生成.txt、.json、.md等文件,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了小程序指紋驗(yàn)證的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
變量相互引用的原因是：由于某些類型的變量是按地址存儲的而導(dǎo)致的兩個(gè)或多的參數(shù)的值互相影響.2010-05-05
Element-UI的?InfiniteScroll?無限滾動組件基本使用及應(yīng)用場景
這篇文章主要介紹了Element-UI的InfiniteScroll無限滾動組件基本使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
javascript常見數(shù)據(jù)驗(yàn)證插件大全
這篇文章主要介紹了javascript常見數(shù)據(jù)驗(yàn)證插件大全,需要的朋友可以參考下2015-08-08
基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動態(tài)可視化
這篇文章主要介紹了基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動態(tài)可視化,文中給出了詳細(xì)的代碼,它適用于需要展示顏色信息或數(shù)據(jù)分布情況的場景,如設(shè)計(jì)、數(shù)據(jù)分析和教育領(lǐng)域,感興趣的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07