小程序怎样实现分页查询列表的模板 及代码是哪些

今天这篇我们来学习和了解“小程序怎样实现分页查询列表的模板，及代码是什么”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“小程序怎样实现分页查询列表的模板，及代码是什么”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！

具体内容如下

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

}

到此这篇关于“小程序怎样实现分页查询列表的模板，及代码是什么”的文章就介绍到这了,更多相关小程序怎样实现分页查询列表的模板，及代码是什么内容，小编将为大家输出更多高质量的实用文章！

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!