小程序如何實現分頁查詢列表

本文小編為大家詳細介紹“小程序如何實現分頁查詢列表”，內容詳細，步驟清晰，細節處理妥當，希望這篇“小程序如何實現分頁查詢列表”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

讀到這里，這篇“小程序如何實現分頁查詢列表”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。