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

最新推荐文章于 2024-05-29 10:05:46 发布

一际天涯

最新推荐文章于 2024-05-29 10:05:46 发布

阅读量923

点赞数

分类专栏：小程序类

本文链接：https://blog.csdn.net/SKYG909040638/article/details/106804776

版权

本文介绍了如何在小程序中实现分页查询列表的功能，包括list.wxml和list.js的页面结构与逻辑，以及api.js和http.js的简单封装。虽然当前实现尚不完善，但已能初步满足需求。

摘要由CSDN通过智能技术生成

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: [],//列表数组
  }