微信小程序加载商品首页数据时,页码没有更新,老是page=1。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
微信小程序加载商品首页数据时,页码没有更新,老是page=1。

源代码

const { baseUrl } = require('../../config/config');
const config = require('../../config/config')
import { calcViewHeight, iPhone } from '~/utils/device'
const { getToken } = require('../../utils/auth'); // 导入 getToken 方法const { fetchSwiperImages } = require('../../utils/swiperService');
const app = getApp();Page({data: {swiperImages:[],// 初始化轮播图数据loading:true,cardLayout: 'grid',  // 默认卡片布局为网格模式isGrid: true,  // 默认为网格布局currentFilter: 'all', // 默认选中 allproducts:[],   //存储从后端获取的商品数据searchValue: '',results: [],showBottomImage: false, // 控制底部图片的显示状态page: 0, // 当前页码size: 10, // 每页大小hasMore: true, // 是否还有更多数据},onReachBottom: function() {if (this.data.hasMore) {this.fetchData(this.data.currentFilter, this.data.page + 1, this.data.size);} else {wx.showToast({title: '没有更多数据了',icon: 'none'});}// 用户滑动到页面底部时触发this.setData({showBottomImage: true});},handleFilterClick: function(e) {const filterType = e.target.dataset.type;this.setData({currentFilter: filterType,page: 0, // 重置页码hasMore: true, // 重置是否有更多数据标志products: [] // 清空当前商品列表});this.fetchData(filterType);},// 处理网格视图按钮点击事件handleGridViewClick: function() {const currentLayout = this.data.cardLayout;const newLayout = currentLayout === 'grid' ? 'list' : 'grid';this.setData({cardLayout: newLayout,isGrid: !this.data.isGrid});},// 发送请求获取数据async fetchData(filterType, page = 0, size = 10) {try {const token = await getToken();console.log("获取商品数据前需要携带token=" + token);if (!token) {wx.showToast({title: '获取 token 失败,请重试',icon: 'none'});return;}const response = await new Promise((resolve, reject) => {wx.request({url: config.baseUrl + config.getAllProductsUrl, // 使用配置文件中的URLmethod: 'GET',data: { page, size }, // 分页参数header: { 'token': token },success: resolve,fail: reject});});if (response.statusCode === 200) {const products = response.data.data.content || [];const formattedProducts = products.map(product => ({...product,image: `${config.imageBaseUrl}${product.image}`}));const filteredProducts = formattedProducts.filter(product =>product.status === 1 && product.editAuth === 1);this.setData({products: [...this.data.products, ...filteredProducts],loading: false, // 如果有加载指示器,设置为falsehasMore: filteredProducts.length === size, // 是否还有更多数据//page:page //更新页面数据中的page值});if (filteredProducts.length < size) {wx.showToast({title: '没有更多数据了',icon: 'none'});}} else {wx.showToast({title: '数据加载失败',icon: 'none'});}} catch (error) {wx.showToast({title: error.message || '请求失败',icon: 'none'});}},onLoad: function() {// this.loadSwiperImages(); // 调用新的方法获取轮播图数据this.fetchData('all'); // 默认加载“综合”数据},// 处理输入框的输入事件handleSearchInput: function (e) {this.setData({searchValue: e.detail.value // 更新输入框的值});},// 处理搜索事件(按下回车时)handleSearch: function () {const value = this.data.searchValue; // 获取输入的值if (!value) {wx.showToast({title: '请输入搜索内容',icon: 'none'});return;}// 获取 token 并跳转到结果页面getToken().then((token) => {if(!token){wx.showToast({title: '获取 token 失败,请重试',icon: 'none'});return;}// 跳转到另一个页面,并传递搜索内容和 tokenwx.navigateTo({url: `/pages/searchResults/searchResults?value=${value}&token=${token}`}); }).catch((err)=>{// 获取 token 失败时,在这里处理错误wx.showToast({title: '获取 token 失败,请重试',icon: 'none'});})},// 点击商品卡片后跳转到详情页navigateToDetail(event) {const productId = event.currentTarget.dataset.id;wx.navigateTo({url: `/pages/productDetail/productDetail?id=${productId}`,});},// 扫描二维码scanQrcode: function() {wx.scanCode({onlyFromCamera: false,  // 允许从相机和相册中选择图片success: (res) => {const jancode = res.result;console.log("扫描结果:", jancode);this.getProductByJancode(jancode);},fail: (err) => {wx.showToast({title: '扫描失败,请重试',icon: 'none'});}});},// 根据条码查询产品信息getProductByJancode: function(jancode) {getToken().then((token) => {if (!token) {wx.showToast({title: '获取 token 失败,请重试',icon: 'none'});return;}wx.request({url: `${config.baseUrl}/product/admin/detailByJancode`, // 使用配置文件中的URLmethod: 'GET',data: {jancode: jancode},header: {'token': `${token}`},success: (res) => {console.log("res=" + res);console.log("后端返回的数据:", res.data); // 添加日志输出if (res.statusCode === 200 && res.data && res.data.data) {const product = res.data.data;if (product) {// 显示产品信息this.setData({products: [product],showNoResultsImage: false // 如果有结果,隐藏无结果图片});} else {// 没有找到产品wx.showToast({title: '未找到该条码对应的产品',icon: 'none'});this.setData({showNoResultsImage: true // 如果没有结果,显示无结果图片});}} else {wx.showToast({title: '数据加载失败',icon: 'none'});}},fail: (err) => {wx.showToast({title: '请求失败',icon: 'none'});}});}).catch((err) => {wx.showToast({title: err.message,icon: 'none'});});},// 用户点击右上角分享按钮时触发(分享给朋友)onShareAppMessage: function (res) {// return {//   title: '自然的承诺,奢华的保鲜',//   path: 'pages/index/index', // 分享的路径,可以带参数//   imageUrl: '/icons/shareLOGO.png', // 分享的图片 URL//   success: function () {//     wx.showToast({//       title: '分享成功',//       icon: 'success',//       duration: 2000//     });//   },//   fail: function () {//     wx.showToast({//       title: '分享失败',//       icon: 'none',//       duration: 2000//     });//   }// };},// 用户点击右上角分享按钮时触发(分享到朋友圈)onShareTimeline: function (res) {return {title: '自然的承诺,奢华的保鲜',//query: 'param1=value1&param2=value2', // 分享的查询参数imageUrl: '/icons/shareLOGO.png', // 分享的图片 URLsuccess: function () {wx.showToast({title: '分享成功',icon: 'success',duration: 2000});},fail: function () {wx.showToast({title: '分享失败',icon: 'none',duration: 2000});}};}})

在这里插入图片描述
page就可以更新了

const { baseUrl } = require('../../config/config');
const config = require('../../config/config')
import { calcViewHeight, iPhone } from '~/utils/device'
const { getToken } = require('../../utils/auth'); // 导入 getToken 方法const { fetchSwiperImages } = require('../../utils/swiperService');
const app = getApp();Page({data: {swiperImages:[],// 初始化轮播图数据loading:true,cardLayout: 'grid',  // 默认卡片布局为网格模式isGrid: true,  // 默认为网格布局currentFilter: 'all', // 默认选中 allproducts:[],   //存储从后端获取的商品数据searchValue: '',results: [],showBottomImage: false, // 控制底部图片的显示状态page: 0, // 当前页码size: 10, // 每页大小hasMore: true, // 是否还有更多数据},onReachBottom: function() {if (this.data.hasMore) {this.fetchData(this.data.currentFilter, this.data.page + 1, this.data.size);} else {wx.showToast({title: '没有更多数据了',icon: 'none'});}// 用户滑动到页面底部时触发this.setData({showBottomImage: true});},handleFilterClick: function(e) {const filterType = e.target.dataset.type;this.setData({currentFilter: filterType,page: 0, // 重置页码hasMore: true, // 重置是否有更多数据标志products: [] // 清空当前商品列表});this.fetchData(filterType);},// 处理网格视图按钮点击事件handleGridViewClick: function() {const currentLayout = this.data.cardLayout;const newLayout = currentLayout === 'grid' ? 'list' : 'grid';this.setData({cardLayout: newLayout,isGrid: !this.data.isGrid});},// 发送请求获取数据async fetchData(filterType, page = 0, size = 10) {try {const token = await getToken();console.log("获取商品数据前需要携带token=" + token);if (!token) {wx.showToast({title: '获取 token 失败,请重试',icon: 'none'});return;}const response = await new Promise((resolve, reject) => {wx.request({url: config.baseUrl + config.getAllProductsUrl, // 使用配置文件中的URLmethod: 'GET',data: { page, size }, // 分页参数header: { 'token': token },success: resolve,fail: reject});});if (response.statusCode === 200) {const products = response.data.data.content || [];const formattedProducts = products.map(product => ({...product,image: `${config.imageBaseUrl}${product.image}`}));const filteredProducts = formattedProducts.filter(product =>product.status === 1 && product.editAuth === 1);this.setData({products: [...this.data.products, ...filteredProducts],loading: false, // 如果有加载指示器,设置为falsehasMore: filteredProducts.length === size, // 是否还有更多数据page:page //更新页面数据中的page值});if (filteredProducts.length < size) {wx.showToast({title: '没有更多数据了',icon: 'none'});}} else {wx.showToast({title: '数据加载失败',icon: 'none'});}} catch (error) {wx.showToast({title: error.message || '请求失败',icon: 'none'});}},onLoad: function() {// this.loadSwiperImages(); // 调用新的方法获取轮播图数据this.fetchData('all'); // 默认加载“综合”数据},// 处理输入框的输入事件handleSearchInput: function (e) {this.setData({searchValue: e.detail.value // 更新输入框的值});},// 处理搜索事件(按下回车时)handleSearch: function () {const value = this.data.searchValue; // 获取输入的值if (!value) {wx.showToast({title: '请输入搜索内容',icon: 'none'});return;}// 获取 token 并跳转到结果页面getToken().then((token) => {if(!token){wx.showToast({title: '获取 token 失败,请重试',icon: 'none'});return;}// 跳转到另一个页面,并传递搜索内容和 tokenwx.navigateTo({url: `/pages/searchResults/searchResults?value=${value}&token=${token}`}); }).catch((err)=>{// 获取 token 失败时,在这里处理错误wx.showToast({title: '获取 token 失败,请重试',icon: 'none'});})},// 点击商品卡片后跳转到详情页navigateToDetail(event) {const productId = event.currentTarget.dataset.id;wx.navigateTo({url: `/pages/productDetail/productDetail?id=${productId}`,});},// 扫描二维码scanQrcode: function() {wx.scanCode({onlyFromCamera: false,  // 允许从相机和相册中选择图片success: (res) => {const jancode = res.result;console.log("扫描结果:", jancode);this.getProductByJancode(jancode);},fail: (err) => {wx.showToast({title: '扫描失败,请重试',icon: 'none'});}});},// 根据条码查询产品信息getProductByJancode: function(jancode) {getToken().then((token) => {if (!token) {wx.showToast({title: '获取 token 失败,请重试',icon: 'none'});return;}wx.request({url: `${config.baseUrl}/product/admin/detailByJancode`, // 使用配置文件中的URLmethod: 'GET',data: {jancode: jancode},header: {'token': `${token}`},success: (res) => {console.log("res=" + res);console.log("后端返回的数据:", res.data); // 添加日志输出if (res.statusCode === 200 && res.data && res.data.data) {const product = res.data.data;if (product) {// 显示产品信息this.setData({products: [product],showNoResultsImage: false // 如果有结果,隐藏无结果图片});} else {// 没有找到产品wx.showToast({title: '未找到该条码对应的产品',icon: 'none'});this.setData({showNoResultsImage: true // 如果没有结果,显示无结果图片});}} else {wx.showToast({title: '数据加载失败',icon: 'none'});}},fail: (err) => {wx.showToast({title: '请求失败',icon: 'none'});}});}).catch((err) => {wx.showToast({title: err.message,icon: 'none'});});},// 用户点击右上角分享按钮时触发(分享给朋友)onShareAppMessage: function (res) {// return {//   title: '自然的承诺,奢华的保鲜',//   path: 'pages/index/index', // 分享的路径,可以带参数//   imageUrl: '/icons/shareLOGO.png', // 分享的图片 URL//   success: function () {//     wx.showToast({//       title: '分享成功',//       icon: 'success',//       duration: 2000//     });//   },//   fail: function () {//     wx.showToast({//       title: '分享失败',//       icon: 'none',//       duration: 2000//     });//   }// };},// 用户点击右上角分享按钮时触发(分享到朋友圈)onShareTimeline: function (res) {return {title: '自然的承诺,奢华的保鲜',//query: 'param1=value1&param2=value2', // 分享的查询参数imageUrl: '/icons/shareLOGO.png', // 分享的图片 URLsuccess: function () {wx.showToast({title: '分享成功',icon: 'success',duration: 2000});},fail: function () {wx.showToast({title: '分享失败',icon: 'none',duration: 2000});}};}})

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

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

相关文章

优化Docker镜像:提升部署效率与降低资源消耗

目录 1. 最小化镜像层 2. 使用轻量级基础镜像 3. 多阶段构建 4. 清理不必要的文件和依赖 5. 使用.dockerignore文件 6. 压缩和优化文件系统 7. 外部化配置和数据 8. 限制容器资源 9. 定期清理未使用的镜像和容器 结论 在云计算和微服务架构的浪潮中&#xff0c;Docke…

自研芯片逾十年,亚马逊云科技Graviton系列芯片全面成熟

在云厂商自研芯片的浪潮中&#xff0c;亚马逊云科技无疑是最早践行这一趋势的先驱。自其迈出自研芯片的第一步起&#xff0c;便如同一颗石子投入平静的湖面&#xff0c;激起了层层涟漪&#xff0c;引领着云服务和云上算力向着更高性能、更低成本的方向演进。 早在2012年&#x…

ApiChain 从迭代到项目 接口调试到文档生成单元测试一体化工具

项目地址&#xff1a;ApiChain 项目主页 ApiChain 简介 ApiChain 是一款类似 PostMan 的接口网络请求与文档生成软件&#xff0c;与 PostMan 不同的是&#xff0c;它基于 项目和迭代两个视角管理我们的接口文档&#xff0c;前端和测试更关注版本迭代中发生变更的接口编写代码…

游戏引擎学习第22天

移除 DllMain() 并成功重新编译 以下是对内容的详细复述与总结&#xff1a; 问题和解决方案&#xff1a; 在编译过程中遇到了一些问题&#xff0c;特别是如何告知编译器不要退出程序&#xff0c;而是继续处理。问题的根源在于编译过程中传递给链接器的参数设置不正确。原本尝试…

“软件定义汽车”时代 | 产线海量数据刷写解决方案

一 背景 从起初汽车概念问世时期的“机械定义汽车”&#xff0c;到电力出现后的“电器定义汽车”&#xff0c;再到电子科技迅猛发展后的“电子定义汽车”&#xff0c;再到如今的“软件定义汽车”&#xff0c;可以看出&#xff0c;软件在车辆中扮演着越来越重要的角色。与此同时…

基于预测反馈的情感分析情境学习

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;编程探索专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月25日20点02分 神秘男子影, 秘而不宣藏。 泣意深不见, 男子自持重, 子夜独自沉。 论文链接 点击开启你的论文编程之旅…

自制Windows系统(十)

上图 &#xff08;真的不是Windows破解版&#xff09; 开源地址&#xff1a;仿Windows

CTF-RE 从0到 N: 高版本 APK 调试 + APK逻辑修改再打包 + os层调试[2024 强网杯青少年专项赛 Flip_over] writeup

非常好的题,很适合新手入门!!! how tu use JEB 通过百度网盘分享的文件&#xff1a;app-debug.apk 链接&#xff1a;https://pan.baidu.com/s/11oPBq7LTnzasuefGeU6mXA?pwd1111 提取码&#xff1a;1111 --来自百度网盘超级会员V2的分享step1 反编译查看Manifest android:…

Taro React小程序开发框架 总结

目录 一、安装 二、目录结构 三、创建一个自定义页面 四、路由 1、API 2、传参 3、获取路由参数 4、设置TabBar 五、组件 六、API Taro非常好用的小程序框架&#xff0c;React开发者无缝衔接上。 一、安装 官方文档&#xff1a;Taro 文档 注意&#xff0c;项目创建…

qt添加模块

以QtNetwork模块为例 方式一 扩展-qt vs tools-qt project settings 方式二 右键选中项目-属性-qt project settings 方法三 在此界面选择select modules,即可进行相应模块添加

传统经验光照模型

1.什么是光照模型 光照模型(illumination model)&#xff0c;也称为明暗模型&#xff0c;用于计算物体某点处的光强(颜色值)&#xff0c;从算法理论基础而言&#xff0c;光照模型分为两类&#xff0c;一种是基于物理理论的&#xff0c;另一种是基于经验模型的。 基于物理理论的…

金融市场和预期

1.债券的分类 短期债券&#xff08;Short-term Bonds&#xff09;&#xff1a; 通常指到期期限在1年以内的债券。 中期债券&#xff08;Medium-term Bonds&#xff09;&#xff1a; 到期期限在1年到10年之间的债券。 长期债券&#xff08;Long-term Bonds&#xff09;&#xff…

C++:用红黑树封装map与set-2

文章目录 前言一、红黑树封装map与set中const迭代器1. 框架的搭建2. set实现const迭代器3. map实现const迭代器 二、operator[ ]1. operator[ ]要达成的样子2. insert的改变 三. 解决insert里set中的问题四. 解决map中的operator[ ]总结用红黑树封装map与set代码 前言 前面我们…

软件/游戏提示:mfc42u.dll没有被指定在windows上运行如何解决?多种有效解决方法汇总分享

遇到“mfc42u.dll 没有被指定在 Windows 上运行”的错误提示&#xff0c;通常是因为系统缺少必要的运行库文件或文件损坏。以下是多种有效的解决方法&#xff0c;可以帮助你解决这个问题&#xff1a; 原因分析 出现这个错误的原因是Windows无法找到或加载MFC42u.dll文件。这可…

07 初始 Oracle 优化器

查询优化器&#xff0c;简称优化器&#xff0c;是数据库最核心的组件之一。我们在这个系列的第一篇文章中已经给大家介绍了&#xff0c;优化器会参与到SQL语句的解析过程中&#xff0c;用来生成SQL语句的执行计划&#xff0c;直接决定SQL语句执行性能的优劣。 什么是执行计划 …

累积局部效应 (ALE) 图分析记录

Git地址&#xff1a;https://github.com/blent-ai/ALEPython/tree/dev 查看源码需要pip install alepython安装&#xff0c;这边查看源码发现就实际就一个py文件而已&#xff0c;我懒得再去安装&#xff0c;故直接下载源码&#xff0c;调用方法也可&#xff1b; # -*- coding:…

远程控制软件:探究云计算和人工智能的融合

在数字化时代&#xff0c;远程控制工具已成为我们工作与生活的重要部分。用户能够通过网络远程操作和管理另一台计算机&#xff0c;极大地提升了工作效率和便捷性。随着人工智能&#xff08;AI&#xff09;和云计算技术的飞速发展&#xff0c;远程控制工具也迎来了新的发展机遇…

正则表达式灾难:重新认识“KISS原则”的意义

RSS Feed 文章标题整理 微积分在生活中的应用与思维启发 捕鹿到瞬时速度的趣味探索 微积分是一扇通往更广阔世界的门&#xff0c;从生活中学习思维的工具。 数据库才是最强架构 你还在被“复杂架构”误导吗&#xff1f; 把业务逻辑写入数据库&#xff0c;重新定义简单与效率。…

网络原理(一):应用层自定义协议的信息组织格式 初始 HTTP

目录 1. 应用层 2. 自定义协议 2.1 根据需求 > 明确传输信息 2.2 约定好信息组织的格式 2.2.1 行文本 2.2.2 xml 2.2.3 json 2.2.4 protobuf 3. HTTP 协议 3.1 特点 4. 抓包工具 1. 应用层 在前面的博客中, 我们了解了 TCP/IP 五层协议模型: 应用层传输层网络层…

【JUC-Interrupt】中断相关概念

线程中断 一、相关概念二、API2.1、isInterrupted方法2.2、interrupted方法2.3、interrupt 三、总结&#xff1a; 一、相关概念 一个线程不应该由其他线程中断或停止&#xff0c;应该有线程自己来决定。 在Java中没有办法立即停止一个线程&#xff0c;因此提供了用于停止线程…