当前位置: 首页 > news >正文

从零用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

相关文章:

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

前言 移动端演示 http://8.146.211.120:8081/#/ 前面的文章我们基本完成了主页的布局 今天我们具体的去进行实现 并且分享我开发时遇到的问题 首先先看效果 java仿小红书主页 实现效果为 1.顶端全屏切换 2.上划加载更多 3.下拉当前页整体刷新 顶端全屏切换我们选择 gui-switch…...

打电话玩手机识别-支持YOLO,COCO,VOC格式的标记,超高识别率可检测到手持打电话, 非接触式打电话,玩手机自拍等

打电话玩手机识别-支持YOLO&#xff0c;COCO&#xff0c;VOC格式的标记&#xff0c;超高识别率可检测到手持打电话&#xff0c; 非接触式打电话&#xff0c;玩手机自拍等1275个图片。 手持打电话&#xff1a; 非接触打电话 玩手机 数据集下载 yolov11:https://download.csdn…...

黑马程序员Java项目实战《苍穹外卖》Day12

苍穹外卖-day12 课程内容 工作台Apache POI导出运营数据Excel报表 功能实现&#xff1a;工作台、数据导出 工作台效果图&#xff1a; 数据导出效果图&#xff1a; 在数据统计页面点击数据导出&#xff1a;生成Excel报表 1. 工作台 1.1 需求分析和设计 1.1.1 产品原…...

实现SpringBoot项目嵌入其他项目

很多时候我们需要在项目里面嵌入其他项目或者被其他项目嵌入&#xff0c;如我们开发一个开源项目b&#xff0c;用户需要在自己的项目a嵌入b项目&#xff0c;使用b项目的功能&#xff0c;而且要实现a项目工作最小化&#xff0c;最好实现引入即用。 1.定义b项目的自定义配置 …...

海康威视摄像头RTSP使用nginx推流到服务器直播教程

思路&#xff1a; 之前2020年在本科的时候&#xff0c;由于项目的需求需要将海康威视的摄像头使用推流服务器到网页进行直播。这里将自己半个月琢磨出来的步骤给大家发一些。切勿转载&#xff01;&#xff01;&#xff01;&#xff01; 使用网络摄像头中的rtsp协议---------通…...

【自动化】requirements.txt

1.是什么&#xff1f; 用于列出项目依赖的所有Python包及其版本。这使得其他开发者可以轻松地安装与你的项目兼容的环境&#xff0c;或者在不同的机器上复制相同的开发环境。 2.如何编写requirements.txt 手动创建 格式&#xff1a; 包名版本号 在终端home命令自动生成 创建r…...

C++ 中多态性在实际项目中的应用场景

背景与需求 在一个图形绘制软件中&#xff0c;需要绘制多种不同的图形&#xff0c;如圆形、矩形、三角形等。每个图形都有自己的绘制方法&#xff0c;但是它们都可以被看作是一个抽象的 “图形” 概念&#xff0c;并且都有一个共同的操作&#xff0c;比如绘制&#xff08;draw&…...

手机租赁系统开发指南一站式服务流程解析

内容概要 手机租赁系统的开发是一个复杂但有趣的过程&#xff0c;像搭建乐高一样&#xff0c;只要找到合适的模块&#xff0c;就能打造出一个宾至如归的租赁平台。在这部分&#xff0c;我们将对开发流程的整体结构进行简要概述&#xff0c;并指出每个环节的重要性。 首先&…...

基于Couchbase的数据构建方案:数仓分层

初步方案是将公共层和报表层分别放在不同的bucket中&#xff0c;这种设计从存储和访问优化的角度是合理的&#xff0c;但仍有以下细节需要考虑&#xff1a; 1. 数仓公共层设计&#xff08;origin bucket&#xff09; 合理性分析&#xff1a; 将ODS、DWD、DWS层的数据放在一个b…...

Linux中的线程

目录 线程的概念 进程与线程的关系 线程创建 线程终止 线程等待 线程分离 原生线程库 线程局部存储 自己实现线程封装 线程的优缺点 多线程共享与独占资源 线程互斥 互斥锁 自己实现锁的封装 加锁实现互斥的原理 死锁 线程同步 线程的概念 回顾进程相关概念 …...

【保姆级】Mac如何安装+切换Java环境

本文从如何下载不同版本的JDK,到如何丝滑的切换JDK,以及常见坑坑的处理方法,应有尽有,各位看官走过路过不要错过~~~ 下载⏬ 首先上官网: https://www.oracle.com/ 打不开的话可以使用下面👇这个中文的 https://www.oracle.com/cn/java/technologies/downloads/a…...

leetcode 31 Next Permutation

题意 找到下一个permutation是什么&#xff0c;对于一个数组[1&#xff0c;2&#xff0c;3]&#xff0c;下一个排列就是[1, 3, 2] 链接 https://leetcode.com/problems/next-permutation/ 思考 首先任何一个permutation满足一个性质&#xff0c;从某个位置往后一定是降序。…...

从RocketMQ到Dubbo:自研中间件技术的崛起

目录 一. 宝兰德 BES 中间件&#xff08;BES - Business Enterprise Server&#xff09; 二. TongWeb 中间件 三. 阿里巴巴 RocketMQ 四. 京东 JStorm 五. 华为 GaussDB 六. 华为 FusionInsight 七. 百度 Tinker 八. 中科曙光 Kylin 九. 滴滴 Druid 一. 宝兰德 BES 中间…...

计算机键盘简史 | 键盘按键功能和指法

注&#xff1a;本篇为 “计算机键盘简史 | 键盘按键功能和指法” 相关文章合辑。 英文部分机翻未校。 The Evolution of Keyboards: From Typewriters to Tech Marvels 键盘的演变&#xff1a;从打字机到技术奇迹 Introduction 介绍 The keyboard has journeyed from a humb…...

考研两三题

283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 本题解法&#xff1a;使用双指针 解法一&#xff1a; 如上图&#xff0c;在一开始slow指向-1&#xff0c;fast指向数组起始位&#xff0c;进入while循环&#xff0c;保证fast不越界&#xff0c;因为代码中fast会自增&#…...

CentOS8或docker镜像centos8更换镜像源

因为 CentOS 8 已经结束生命周期&#xff0c;原来的镜像源不可用了。我们需要将镜像源改为 CentOS 8 的替代源。 在容器中运行以下命令&#xff1a; 首先备份原有的源 cd /etc/yum.repos.d/ mkdir backup mv *.repo backup/ 创建新的源文件 cat > /etc/yum.repos.d/Cent…...

集成方案 | Docusign + 泛微,实现全流程电子化签署!

本文将详细介绍 Docusign 与泛微的集成步骤及其效果&#xff0c;并通过实际应用场景来展示 Docusign 的强大集成能力&#xff0c;以证明 Docusign 集成功能的高效性和实用性。 在现代企业运营中&#xff0c;效率和合规性是至关重要的。泛微作为企业级办公自动化和流程管理的解决…...

知乎数据分析面试题及参考答案

请阐述大数定理和中心极限定理的内容及其在数据分析中的应用。 大数定理是指在随机试验中,每次出现的结果不同,但是大量重复试验出现的结果的平均值却几乎总是接近于某个确定的值。简单来说,当样本量足够大的时候,样本均值会趋近于总体均值。例如,抛硬币试验,当抛硬币的次…...

8.Vue------如何重新加载子组件key属性----vue知识积累

在子组件中使用key属性是一种强制重新渲染子组件的有效方法。‌通过改变key属性的值&#xff0c;Vue会 销毁旧组件并创建新组件&#xff0c;从而实现组件的重新加载。这种方法适用于需要完全重新渲染子组件&#xff0c; 包括其内部状态和生命周期钩子的场景&#xff0c;特别是…...

C语言动态内存管理

1.为什么要有动态内存分配 内存开辟方式: int val 20;//在栈空间上开辟四个字节 char arr[10] {0};//在栈空间上开辟10个字节的连续空间开辟空间的方式特点 空间开辟大小是固定德的数组在申明的时候&#xff0c;必须指明数组的长度&#xff0c;数组空间一旦确定了大小不能…...

【蓝桥杯备战】Day 1

1.基础题目 LCR 018.验证回文串 给定一个字符串 s &#xff0c;验证 s 是否是 回文串 &#xff0c;只考虑字母和数字字符&#xff0c;可以忽略字母的大小写。 本题中&#xff0c;将空字符串定义为有效的 回文串 。 示例 1: 输入: s "A man, a plan, a canal: Panama…...

电子应用设计方案-51:智能镜子系统方案设计

智能镜子系统方案设计 一、引言 智能镜子作为一种新兴的智能家居设备&#xff0c;将传统镜子与现代科技相结合&#xff0c;为用户提供了丰富的功能和便捷的体验。本方案旨在设计一款功能强大、用户友好、外观美观的智能镜子系统。 二、系统概述 1. 系统目标 - 提供清晰的镜面…...

[2015~2024]SmartMediaKit音视频直播技术演进之路

技术背景 2015年&#xff0c;因应急指挥项目需求&#xff0c;我们实现了RTMP推送音视频采集推送&#xff08;采集摄像头和麦克风数据&#xff09;模块&#xff0c;在我们做好了RTMP推送模块后&#xff0c;苦于没有一个满足我们毫秒级延迟诉求的RTMP播放器&#xff0c;于是第一…...

图片添加水印的实验原理,实验代码,实验现象

一、图片添加水印的实验原理 1. 选择水印类型 可见水印&#xff1a;这些水印可以直接被肉眼看到&#xff0c;通常用于防止未经授权的使用。它们可以是文字、标志或图案等形式&#xff0c;并且放置在图像的显著位置。不可见水印&#xff1a;这类水印不容易被察觉&#xff0c;但…...

Python Web 开发案例解析

一、Flask 基础应用案例 &#xff08;一&#xff09;项目搭建与初始化 环境准备 安装 Python 解释器&#xff0c;确保版本符合 Flask 要求&#xff0c;如 Python 3.6 及以上。使用pip安装 Flask 库&#xff0c;命令为pip install flask。可以创建虚拟环境&#xff0c;如python…...

JPG 转 PDF:免费好用的在线图片转 PDF 工具

JPG 转 PDF&#xff1a;免费好用的在线图片转 PDF 工具 在日常工作和生活中&#xff0c;我们经常需要将图片转换为 PDF 格式。无论是制作电子文档、准备演示材料&#xff0c;还是整理照片集&#xff0c;将图片转换为 PDF 都是一个常见的需求。今天为大家介绍一款完全免费、无需…...

代码随想录44天

1143.最长公共子序列 class Solution:def longestCommonSubsequence(self, s: str, t: str) -> int:n, m len(s), len(t)cache # 缓存装饰器&#xff0c;避免重复计算 dfs 的结果&#xff08;记忆化&#xff09;def dfs(i: int, j: int) -> int:if i < 0 or j <…...

C语言-详细解答-重组字符串并16进制转10进制

1.题目要求 2.代码实现 #include <stdio.h> #include <ctype.h> #include <string.h>int hexToDec(char hex[]) {int len strlen(hex);int base 1;int dec 0;for (int i len - 1; i > 0; i--) {if (isdigit(hex[i])) {dec (hex[i] - 0) * base;} e…...

scala列表

1 不可变 List 说明 &#xff08;1&#xff09;List 默认为不可变集合 &#xff08;2&#xff09;创建一个 List&#xff08;数据有顺序&#xff0c;可重复&#xff09; &#xff08;3&#xff09;遍历 List &#xff08;4&#xff09;List 增加数据 &#xff08;5&#…...

医疗急救技能大赛理论题库

医疗急救技能大赛理论题库 题型包括&#xff1a;A1 型题 400题&#xff0c;A2 型题40题&#xff0c;A3/A4 型40 题&#xff0c; B 型题 80 题 &#xff0c;X 型题 160 题&#xff0c;判断题 80 题。 一、A1 型题:共计400 题 &#xff08;即最佳回答题&#xff0c;它由一个叙…...

深入浅出WebRTC—ULPFEC

FEC 通过在发送端添加额外的冗余信息&#xff0c;使接收端即使在部分数据包丢失的情况下也能恢复原始数据&#xff0c;从而减轻网络丢包的影响。在 WebRTC 中&#xff0c;FEC 主要有两种实现方式&#xff1a;ULPFEC 和 FlexFEC&#xff0c;FlexFEC 是 ULPFEC 的扩展和升级&…...

SQL 在线格式化 - 加菲工具

SQL 在线格式化 打开网站 加菲工具 选择“SQL 在线格式化” 或者直接访问 https://www.orcc.online/tools/sql 输入sql&#xff0c;点击上方的格式化按钮即可 输入框得到格式化后的sql结果...

到达率的变化动态调整服务器的服务率,实现负载均衡,提高资源利用效率

中心可以根据任务到达率的变化动态调整服务器的服务率,实现负载均衡,提高资源利用效率 服务率和到达率 中心可以根据任务到达率的变化动态调整服务器的服务率,实现负载均衡,提高资源利用效率服务率(Service Rate)到达率(Arrival Rate)控制参数实现负载均衡的方法在云计…...

【Golang】Go语言编程思想(六):Channel,第四节,Select

使用 Select 如果此时我们有多个 channel&#xff0c;我们想从多个 channel 接收数据&#xff0c;谁来的快先输出谁&#xff0c;此时应该怎么做呢&#xff1f;答案是使用 select&#xff1a; package mainimport "fmt"func main() {var c1, c2 chan int // c1 and …...

认证插件介绍

本文档是针对 UOS 登录器插件给出开发指南&#xff0c;目的是为了让开发人员了解如何在 UOS 登录器上增加一种自定义认证方式&#xff0c;对插件接口做了详细说明以及实战练习。 文章目录 一、认证插件可以做什么&#xff1f;二、认证流程三、术语说明四、安全性五、可靠性六、…...

MindSearch深度解析实践

1. 课程内容 1.1 MindSearch 简介 MindSearch 是一个开源的 AI 搜索引擎框架&#xff0c;具有与 Perplexity.ai Pro 相同的性能。我们可以轻松部署它来构建自己的专属搜索引擎&#xff0c;可以基于闭源的LLM&#xff08;如GPT、Claude系列&#xff09;&#xff0c;也可以使用…...

[oeasy]python052_[系统开发语言为什么默认是c语言

[系统开发语言为什么默认是c语言 [趣味拓展]c语言发祥史_c是如何成为第一系统语言的 上次我们了解了 标识符 要求 首字符 为 字母和下划线 后面字符 为 字母和下划线 外加 数字 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 使用isidentifier函数 可…...

【java常用算法和应用场景】

java常用算法和应用场景 Java中常用的算法涵盖多个领域&#xff0c;包括排序算法、查找算法、字符串匹配算法、图论算法、动态规划算法、贪心算法、分治算法等。以下是Java中一些常用算法及其应用场景和示例代码&#xff1a; 一、排序算法 排序算法是计算机科学中的一种基本…...

D96【python 接口自动化学习】- pytest进阶之fixture用法

day96 pytest的fixture详解&#xff08;三&#xff09; 学习日期&#xff1a;20241211 学习目标&#xff1a;pytest基础用法 -- pytest的fixture详解&#xff08;三&#xff09; 学习笔记&#xff1a; fixture(scop"class") (scop"class") 每一个类调…...

知从科技总经理受邀参加上海临港新片区商会“湖畔TECS”技术分享沙龙(第五期)

11月26日&#xff0c;上海知从科技有限公司创始人陈荣波先生受邀出席临港新片区商会 “湖畔TECS”技术分享沙龙&#xff08;第五期&#xff09;活动&#xff0c;并在活动上为参会嘉宾们做了主题分享。本次活动由临港新片区商会主办&#xff0c;智能网联汽车创新联盟协办&#x…...

scala的泛型应用场景

用代码表示泛型类&#xff1a;//泛型&#xff1a;类型参数化 //Pair约定一对数据 class Pair[T](var x:T,var y:T) //class 类名&#xff08;成员名&#xff1a;数据类型&#xff09;--->class 类名[泛型名]&#xff08;成员名&#xff1a;泛型名&#xff09;/.参考代码&…...

三种策略改进的沙猫群优化算法(MSCSO)

三种策略改进的沙猫群优化算法(MSCSO) 目录 三种策略改进的沙猫群优化算法(MSCSO)效果一览基本介绍程序设计参考资料效果一览 基本介绍 改进点: 三角形游走策略Levy飞行游走策略透镜成像反向学习SCSO是 2022年提出的元启发式优化算法,该算法灵感来源于沙猫的捕食行为,沙猫群…...

Google Cloud Database Option(数据库选项说明)

关系数据库 在关系数据库中&#xff0c;信息存储在表、行和列中&#xff0c;这通常最适合结构化数据。因此&#xff0c;它们用于数据结构不经常更改的应用程序。与大多数关系数据库交互时使用 SQL&#xff08;结构化查询语言&#xff09;。它们为数据提供 ACID 一致性模式&am…...

java抽奖系统登录下(四)

6.4 关于登录 最简单的登录&#xff1a; 1、web登录页填写登录信息&#xff0c;前端发送登录信息到后端&#xff1b; 2、后端接受登录信息&#xff0c;并校验。校验成功&#xff0c;返回成功结果。 这种登录会出现一个问题&#xff0c;用户1成功登录之后&#xff0c;获取到后台…...

Linux入门攻坚——41、Linux集群系统入门-lvs(2)

lvs-dr&#xff1a;GATEWAY Director只负责请求报文&#xff0c;响应报文不经过Director&#xff0c;直接由RS返回给Client。 lvs-dr的报文路线如上图&#xff0c;基本思路就是报文不会回送Director&#xff0c;第①种情况是VIP、DIP、RIP位于同一个网段&#xff0c;这样&…...

Android Freezer

Freezer原理 Android按照优先级将一般的APP从高到低分为: 前台进程 --> 可感知进程–> 服务进程 --> Cached进程。 Freezer通过冻住cached进程,来迫使这些进程让出CPU&#xff0c;以达到优化系统资源使用的目的。 Cached进程是怎么判定的呢&#xff1f; 由于andro…...

GeeCache-单体并发缓存

实现LRU中value接口的缓存类 使用互斥锁封装LRU缓存类&#xff0c;实现并发访问 实现Group组&#xff0c;用名称对缓存分类 Getter为缓存击穿时调用的回调函数 若缓存击穿则调用回调函数&#xff0c;并把读取到的值加载到缓存中...

ctfshow-web 151-170-文件上传

151. 我们首先想到就是上传一句话木马。但是看源代码限制了png。 &#xff08;1&#xff09;改前端代码。 这里是前端限制了上传文件类型&#xff0c;那我们就改一下就好了嘛,改成php。 这里直接修改不行&#xff0c;给大家推荐一篇简短文章&#xff0c;大家就会了&#xff08…...

汽车车牌标记支持YOLO,COCO,VOC三种格式标记,4000张图片的数据集

本数据集支持YOLO&#xff0c;COCO&#xff0c;VOC三种格式标记汽车车牌&#xff0c;无论是新能源汽车还是油车都能识别标记&#xff0c;该数据集一共包含4000张图片 数据集分割 4000总图像数 训练组 70&#xff05; 2800图片 有效集 20&#xff05; 800图片 测…...

解决VSCode无法识别相对路径的问题

前言&#xff1a; 近日在学习python文件操作时&#xff0c;发现使用VSCode作为编辑器时&#xff0c;文件的相对路径会出问题&#xff0c;报错“指定路径下找不到文件”&#xff0c;无法找到想要的文件。 知识点①&#xff1a;不同操作系统所使用的路径斜杠不同&#xff1a;Lin…...