小程序-滚动触底-页面列表数据无限加载

// index/index.vue

<template>

  <!-- 自定义导航栏 -->

  <CustomNavbar />

  <scroll-view @scrolltolower="onScrolltolower" scroll-y class="scroll-view">

    <!-- 猜你喜欢 -->

    <Guess ref="guessRef" />

  </scroll-view>

</template>

<script>

// 滚动触底事件

const guessRef = ref<GuessInstance>()

const onScrolltolower = () => {

  console.log('滚动到底部啦-guessRef', guessRef.value)

  guessRef.value?.getMore()

}

</script>

// src/index/components/guess.vue

<script setup lang="ts">
import { getHomeGoodsGuessLikeAPI } from '@/services/home'
import type { PageParams } from '@/types/global'
import type { GuessItem } from '@/types/home'
import { onMounted, ref } from 'vue'

// 分页参数
const pageParams: Required<PageParams> = {
  page: 1,
  pageSize: 10,
}
// 猜你喜欢的列表
const guessList = ref<GuessItem[]>([])
// 已结束标记
const finish = ref(false)
// 获取猜你喜欢数据
const getHomeGoodsGuessLikeData = async () => {
  // 退出分页判断
  if (finish.value === true) {
    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
  }
  const res = await getHomeGoodsGuessLikeAPI(pageParams)
  // 数组追加
  guessList.value.push(...res.result.items)
  // 分页条件
  if (pageParams.page < res.result.pages) {
    // 页码累加
    pageParams.page++
  } else {
    finish.value = true
  }
}
// 组件挂载完毕
onMounted(() => {
  getHomeGoodsGuessLikeData()
})
// 暴露方法
defineExpose({
  getMore: getHomeGoodsGuessLikeData,
})
</script>

<template>
  <!-- 猜你喜欢 -->
  <view class="caption">
    <text class="text">猜你喜欢</text>
  </view>
  <view class="guess">
    <navigator
      class="guess-item"
      v-for="item in guessList"
      :key="item.id"
      :url="`/pages/goods/goods`"
    >
      <image class="image" mode="aspectFill" :src="item.picture"></image>
      <view class="name"> {{ item.name }} </view>
      <view class="price">
        <text class="small">¥</text>
        <text>{{ item.price }}</text>
      </view>
    </navigator>
  </view>
  <view class="loading-text">
    {{ finish ? '亲,我也是有底线的哦~' : '正在加载...' }}
  </view>
</template>

效果图:看浏览器 network 面板的接口调用情况

滚动到底部,无数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/329766.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue koa post 请求代理失败问题总结

场景是在使用 koa 写接口时&#xff0c;客户端发送 post 请求&#xff0c;服务端会报下面这个错误&#xff0c;导致接口未能访问成功&#xff1a; 前端接口一直 Pending 状态&#xff0c; 解决方案&#xff1a;走的是本地 mock 数据&#xff0c;未访问服务端的接口 总结&#x…

.NET调用阿里云人脸核身服务端 (ExecuteServerSideVerification)简易流程保姆级教学

需要注意的是&#xff0c;以下内容仅限基础调用 功能说明 该功能是输入核验人的姓名和身份证以及人脸照片&#xff0c;去阿里库里面匹配&#xff0c;3个信息是否一致&#xff0c;一致则验证通过&#xff0c;需要注意的是&#xff0c;人脸有遮挡&#xff0c;或者刘海&#xff0…

「项目」负载均衡在线OJ(ONLINE_JUDGE)系统

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

作家百度百科怎么做出来的 怎么创建作家百科词条才能通过

创建作家百度百科词条需要遵循一定的步骤&#xff0c;并注意一些关键点&#xff0c;以确保词条能够顺利通过审核。以下是伯乐网络传媒pouquan根据经验结果得出的详细指导&#xff1a; 准备工作 注册百度账号&#xff1a;在创建任何百度百科词条之前&#xff0c;您需要先注册一…

Llama模型家族之使用 Supervised Fine-Tuning(SFT)微调预训练Llama 3 语言模型(一) LLaMA-Factory简介

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

docker 指定jdk11镜像执行jar

dockerfile :下载jdk11 并将上传的jar 放入jdk11容器/root&#xff0c;改名为app.jar vi dockerfile 。。。。内容见下图 # 构建jdk11镜像 docker build -t demo . # 也可以通过jdk11镜像&#xff08;前提有jdk11镜像&#xff09;外挂载目录方式运行jar docker run --name d…

AI大模型应用开发实践:4.基于 Chat Completions API 实现外部函数调用

基于 Chat Completions API 实现外部函数调用 2023年6月20日,OpenAI 官方在 Chat Completions API 原有的三种不同角色设定(System, Assistant, User)基础上,新增了 Function Calling 功能。 详见OpenAI Blog functions 是 Chat Completion API 中的可选参数,用于提供…

军工单位如何做到安全跨网文件交换与导出的

在现代信息化战争中&#xff0c;军工单位在信息安全方面的需求尤为突出。跨网文件交换与导出作为军工单位日常运营的重要环节&#xff0c;面临着网络带宽限制、数据安全风险、合规性要求和传输稳定性等挑战。下面&#xff0c;我们将从以下几个方面探讨军工单位如何实现安全、高…

《Effective Objective-C 2.0》读书笔记——协议与分类

目录 第四章&#xff1a;协议与分类第23条&#xff1a;通过委托与数据源协议进行对象间通信第24条&#xff1a;将类的实现代码分散到便于管理的数个分类之中第25条&#xff1a;总是为第三方类的分类名称加前缀第26条&#xff1a;勿在分类中声明属性第27条&#xff1a;使用“cla…

匝间冲击耐压试验仪产品介绍及工作原理

产品简介 武汉凯迪正大KD2684S匝间冲击耐压试验仪适用于电机、变压器、电器线圈等这些由漆包线绕制的产品。因漆包线的绝缘涂敷层本身存在着质量问题&#xff0c;以及在绕线、嵌线、刮线、接头端部整形、绝缘浸漆、装配等工序工艺中不慎而引起绝缘层的损伤等&#xff0c;都会造…

Docker Compose使用

Docker-Compose是什么 docker建议我们每一个容器中只运行一个服务,因为doker容器本身占用资源极少&#xff0c;所以最好是将每个服务单独分割开来&#xff0c;但是这样我们又面临了一个问题&#xff1a; 如果我需要同时部署好多个服务&#xff0c;难道要每个服务单独写Docker…

Midjourney应用场景、特点、生成图片带来影响

Midjourney是一个基于GPT-3.5系列接口开发的免费AI机器人&#xff0c;旨在提供多领域的智能对话服务。本文主要介绍Midjourney的应用场景、功能特点、图片生成后可以做什么&#xff1f; 一、Midjourney应用场景 Midjourney的应用场景相当广泛&#xff0c;以下是一些主要的适用…

Public Key Retrieval is not allowed解决

修改高级属性。 “Public Key Retrieval is not allowed” 错误是由于 MySQL 连接驱动程序的默认行为更改所引起的。在 MySQL 8.0 版本及更新版本中&#xff0c;默认情况下禁用了通过公钥检索用户密码的功能。 在旧版本的 MySQL 中&#xff0c;客户端连接到服务器时&#xf…

【Unity2D:C#Script】制作敌人

一、制作敌人预制体 1. 在场景面板中添加敌人&#xff0c;并创建预制体 2. 设置敌人的锚点在底部 二、为敌人添加碰撞体积 1. 添加Box Collider 2D、Rigidbody 2D组件 2. 调整轴心点位置、层级、碰撞体积大小、刚体类型、锁定z轴 Body Type&#xff08;刚体类型&#xff09;&…

网络的基础理解

文章目录 网络的基础认识 网络协议协议分层OSI七层模型TCP/IP 五层/四层 模型 网络的基础认识 先来看下面几个问题 什么是网络&#xff1f; 网络就是有许多台设备包括计算机单不仅限于计算机&#xff0c;这些设备通过相互通信所组成起来系统&#xff0c;我们称之为网络所以如…

【动态规划七】背包问题

目录 0/1背包问题 一、【模板】01背包 二、分割等和子集 三、目标和 四、最后一块石头的重量 II 完全背包问题 一、【模板】完全背包 二、零钱兑换 三、零钱兑换 II 四、完全平方数 二维费用的背包问题 一、一和零 二、盈利计划 似包非包 组合总和 卡特兰数 不…

Sui生态DeFi项目Cetus和Aftermath宣布启动孵化器

Sui DeFi中的去中心化交易所Cetus和Aftermath Finance联合Sui基金会宣布启动新的孵化器&#xff0c;为初创项目提供更多可行性途径。这两个DeFi项目在Sui上有着较长的历史&#xff0c;自去年一同与主网推出以来&#xff0c;目前在TVL方面位居前五。这两个项目的持久性和成功使它…

《Effective Objective-C 2.0》读书笔记——接口与API设计

目录 第三章&#xff1a;接口与API设计第15条&#xff1a;用前缀避免命名空间冲突第16条&#xff1a;提供“全能初始化方法”第17条&#xff1a;实现description方法第18条&#xff1a;尽量使用不可变对象第19条&#xff1a;使用清晰而协调的命名方式第20条&#xff1a;为私有方…

计算机网络协议

网络协议 基于TCP的应用层协议 POP3&#xff08;Post Office Protocol 3&#xff09;&#xff1a; 用于支持客户端远程管理服务器上的电子邮件。它支持**“离线”邮件处理**&#xff0c;即邮件发送到服务器上后&#xff0c;一旦邮件被POP3客户端下载到本地计算机&#xff0c;…

Redis --学习笔记

Redis简介 一个基于内存的key-value结构数据库。Redis 是互联网技术领域使用最为广泛的存储中间件 特点&#xff1a; 基于内存存储&#xff0c;读写性能高 适合存储热点数据&#xff08;热点商品、资讯、新闻&#xff09; 企业应用广泛 Redis默认端口号为6379 Redis是用…