从零用java实现 小红书 springboot vue uniapp (2)主页优化

前言

移动端演示 http://8.146.211.120:8081/#/

前面的文章我们基本完成了主页的布局
今天我们具体的去进行实现 并且分享我开发时遇到的问题

首先先看效果

java仿小红书主页

实现效果为
1.顶端全屏切换
2.上划加载更多
3.下拉当前页整体刷新
顶端全屏切换我们选择 gui-switch-navigation 结合 swiper swiper-item 进行实现
关键代码

			<gui-switch-navigation:activeLineClass="['gui-xhs-red']":isCenter="true"activeDirection="center"textAlign="center":items="tabs":size="150":currentIndex="currentIndex"@change="navchange"></gui-switch-navigation><swiper:current="currentIndex"@change="swiperChange":style="{height:mainHeight+'px',width:'750rpx'}"><!-- 轮播项目数量对应 上面的选项标签 --><swiper-item ><!-- 使用滚动区域来实现主体内容区域 --><scroll-view:style="{height:mainHeight+'px'}":scroll-y="true"class="gui-bg-gray">.................

下滑加载更多

当页面滑动到底端时 我们执行获取笔记的方法
每页的条数需要请求偶数 否则会出现 左侧多一个元素(详情参照上篇文章 瀑布流的实现) 每请求一次 当前页码加1 直至没有页数 组件提示没有更多

		getNotes1(isReload){console.log('我开始请求了')this.apiLoadingStatus1 = true;const that = thisuni.app.get('/notes', {limit:6,page:this.page1}, '', (res => {if (res.code == 200) {console.log('当前页'+that.page1)console.log('总页数'+res.data.pages)if(that.page1<=res.data.pages){let notes = res.data.records;var lArr = that.noteList1[0];var rArr = that.noteList1[1];//填充数组[此处的 notes 数据应该来自与api接口数据]//数据格式见 "/data/data.js"for (var i = 0; i < notes.length; i++) {if (i % 2 == 0) {lArr.push(notes[i]);} else {rArr.push(notes[i]);}}that.noteList1 = [lArr, rArr];if(that.page1==res.data.pages){that.$refs.guipage1.nomore();}else{that.page1 = that.page1 + 1;that.$refs.guipage1.stoploadmore();}that.apiLoadingStatus1 = false;that.pageLoading1  = false;if(isReload){this.$refs.guipage1.endReload();}}}}))},

当做到下拉刷新时 命名我们的uniapp配置了

		{"path" : "pages/switchPages/index","style" :{"navigationBarTitleText": "小红书","navigationStyle" : "custom","enablePullDownRefresh":false,"disableScroll":true}}

依然会出现页面整体下拉的情况
如图
下拉问题
导致下拉刷新失效 后来查阅很多资料 发现需要在页面的最外层加上

@touchmove.stop.prevent="() => {}"

至此完美解决
当下拉时 我们只想刷新当前页 避免左右两个tab内容刷新

		reload  : function(){console.log(this.currentIndex)//根据当前index 确定清空的对象this['page'+(this.currentIndex+1)] = 1this['noteList'+(this.currentIndex+1)].splice(0,1,[]);this['noteList'+(this.currentIndex+1)].splice(1,1,[]);this['getNotes'+(this.currentIndex+1)](1);},

这样就可以选择当前下标数据进行请求了 至
至此主页内容基本开发完毕 下一篇我们讲解 笔记详情

代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs

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

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

相关文章

idea 配置 git .gitignore文件配置

.gitignore 内容 .idea/ *.iml target/ *.class *.log .iml在idea项目里面创建一个.gitignore名字的文件&#xff0c;然后把这个文件提交到git上。我一般是放到.idea同级目录。 我遇到了几种情况这个文件配置了但是不生效的情况 第一种 Git的缓存可能会导致配置不生效。尝试…

linux 下nmcli命令使用方法

1、nmcli 是 NetworkManager Command Line Interface 的缩写。 详细解释 NetworkManager: 是 Linux 上常用的网络管理工具&#xff0c;负责管理有线、无线、VPN 等网络连接。 Command Line Interface (CLI): 意味着 nmcli 是 NetworkManager 的命令行界面工具&#xff0c;提…

双指针---移动0

常见的双指针有两种形式&#xff0c;⼀种是对撞指针&#xff0c;⼀种是快慢指针。 这里写自定义目录标题 题目链接 [移动0](https://leetcode.cn/problems/move-zeroes/description/)问题分析代码解决 题目链接 移动0 问题分析 在本题中&#xff0c;我们可以⽤⼀个 cur 指针来…

《智能体开发实战(高阶)》四、系统化的日志周报智能体开发计划

智能体扩展与完善规划 为了将前几个章节的智能体逐步扩展为支持整个公司团队使用的高效工具,以下是分阶段的完善与扩写规划。每个阶段旨在提升功能覆盖范围、处理能力和用户体验,并为企业提供实际价值。 阶段一:基础功能完善 目标:巩固现有功能,提升健壮性和适用性。 支…

linux从frame buffer中将qt界面拷贝出来放到u盘的操作方法

使用的是gsnap工具&#xff0c;源码可以在百度上搜,以Imx6为例的使用方法 rootimx6qsabresd:~# rootimx6qsabresd:~# rootimx6qsabresd:~# df Filesystem 1K-blocks Used Available Use% Mounted on /dev/root 289293 197510 76423 73% / devtmpfs …

Python+OpenCV系列:滤波器的魔力

滤波器是图像处理领域中不可或缺的工具。无论是去除噪声、锐化图像还是提取特征&#xff0c;滤波器都扮演着重要角色。本篇将从简单到复杂&#xff0c;带你快速掌握 PythonOpenCV 中的滤波器使用技巧。 什么是滤波器&#xff1f; 滤波器是一种对图像像素值进行计算、平滑或增强…

Android 使用 Gson + OkHttp 实现 API 的常规使用(个人心得)

学习笔记 一、依赖和权限的添加 网络权限: 在 Android 中进行网络请求时,必须声明权限,确保应用具有访问互联网的能力。 <uses-permission android:name="android.permission.INTERNET"/> 依赖项: 确保在 build.gradle 中添加以下依赖: dependencies …

人工智能的历史概况和脉络

人工智能( AI ) 的历史始于古代&#xff0c;当时有神话、故事和谣言称&#xff0c;人工生物被工匠大师赋予了智慧或意识。从古代到现在&#xff0c;对逻辑和形式推理的研究直接导致了20 世纪 40 年代可编程数字计算机的发明&#xff0c;这是一种基于抽象数学推理的机器。这种设…

基于Arduino的智能太阳能追光系统设计(论文+源码)

1系统方案设计 本次的设基于Arduino的智能太阳能追光系统的设计&#xff0c;整体结构如图2.1所示。整个系统包括Arduino开发板&#xff0c;按键模块&#xff0c;太阳能板&#xff0c;X轴电机,Y轴电机&#xff0c;电池充电模块&#xff0c;电源模块&#xff0c;四路光照检测模块…

Volta——开箱即用的Node.js 版本管理工具

Volta volta 是一个较新的 Node.js 版本管理器&#xff0c;旨在简化 Node.js 和其他工具的安装和管理&#xff0c;在 2019 年出世&#xff0c;仍在积极开发中。Volta 采用了与 nvm 不同的方法&#xff1a;它不是管理 Node.js 的多个版本&#xff0c;而是管理项目及其依赖项。当…

AI+智慧海洋数据集

需要的同学私信联系&#xff0c;推荐关注上面图片 右下角订阅号平台 自取下载。 AI智慧海洋数据可以促进海洋科技领域人工智能新技术产、学、研、用协作&#xff0c;引领行业技术创新&#xff0c;助力AI智慧海洋高质量发展&#xff0c;进一步推广人工智能与海洋科技的融合创新…

【Pandas】pandas eval

Top-level evaluation 方法描述eval(expr[, parser, engine, local_dict, …])用于在传入的字符串形式的表达式上进行高效计算的函数 pandas.eval() pandas.eval() 是 Pandas 库中用于高效计算表达式的函数。它利用 NumExpr 库&#xff08;如果已安装&#xff09;来加速算术…

56.合并区间

以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;intervals [[1,3]…

域名信息收集(小迪网络安全笔记~

附&#xff1a;完整笔记目录~ ps&#xff1a;本人小白&#xff0c;笔记均在个人理解基础上整理&#xff0c;若有错误欢迎指正&#xff01; 2.1 域名信息收集 引子&#xff1a;上一章介绍了服务器的信息收集。本篇则介绍在面对存在Web资产企业时&#xff0c;其域名信息该如何收…

怎样使用Eclipse创建Maven的Java WEB 项目

文章目录 1、第一种方式&#xff08;选择 archetype 方式&#xff09; 1.1、第一步&#xff1a;创建项目1.2、第二步&#xff1a;配置jre1.3、第三步&#xff1a;配置tomcat1.4、第四步&#xff1a;设置为WEB3.11.5、第五步&#xff1a;配置Maven的编译级别 1.5.1、第一种方法…

细说STM32F407单片机SPI基础知识

目录 一、 SPI接口和通信协议 1、 SPI硬件接口 &#xff08;1&#xff09;MOSI(Master Output Slave Input) &#xff08;2&#xff09;MISO(Master Input Slave Output) &#xff08;3&#xff09;SCK 2、SPI传输协议 &#xff08;1&#xff09;CPHA0时的数据传输时序 …

C# OpenCvSharp DNN 实现百度网盘AI大赛-表格检测第2名方案第三部分-表格方向识别

目录 说明 效果 模型 项目 ​编辑 代码 参考 下载 其他 说明 百度网盘AI大赛-表格检测的第2名方案。 该算法包含表格边界框检测、表格分割和表格方向识别三个部分&#xff0c;首先&#xff0c;ppyoloe-plus-x 对边界框进行预测&#xff0c;并对置信度较高的表格边界…

go语言结构体实现数据结构队列(先进先出)存储数据(逐行注释)

正在学习go语言中&#xff0c;欢迎提出宝贵意见 import ("fmt""sync" )// 数据队列以链表的形式存储数据&#xff0c;每个节点存储一个任意类型的数据&#xff0c; // 创建数据队列、添加数据、删除数据、获取队列长度&#xff0c;每个数据存储在一个节点…

Excel + Notepad + CMD 命令行批量修改文件名

注意&#xff1a;该方式为直接修改原文件的文件名&#xff0c;不会生成新文件 新建Excel文件 A列&#xff1a;固定为 renB列&#xff1a;原文件名称C列&#xff1a;修改后保存的名称B列、C列&#xff0c;需要带文件后缀&#xff0c;为txt文件就是.txt结尾&#xff0c;为png图片…

数据结构-排序(来自于王道)

排序的基本概念 插入排序 在这个算法中&#xff0c;除了输入的数组本身&#xff0c;没有使用额外的数据结构来存储数据&#xff0c;所有的操作都是在原数组上进行的。因此&#xff0c;无论输入数组的大小 n 是多少&#xff0c;算法执行过程中所占用的额外空间是固定的&#xff…