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

uniapp 仿小红书轮播图效果

news 来源：原创 2025/6/30 16:02:39

通过对小红书的轮播图分析，可得出以下总结：

1.单张图片时容器根据图片像素定高
2.多图时轮播图容器高度以首图为锚点
3.比首图长则固高左右留白
4.比首图短则固宽上下留白

代码如下：

<template><view>
<!--轮播--><swiperclass="swiper" :style="{ 'height': swiperHeight+ 'px' }"circular:indicator-dots="indicatorDots":autoplay="autoplay":interval="interval":duration="duration"indicator-active-color="#FFFFFF"><swiper-item v-for="(item, index) in imgList" :key="index" ><image class="swiper-image" :src="item" mode="aspectFit" @click="showImage(index)" :style="{ 'height': swiperHeight+ 'px' }"/></swiper-item></swiper></view>
</template>export default {data() {return {indicatorDots: true,autoplay: true,interval: 5000,duration: 300,imgList: ["https://mainoss.duoxiaiche.com/UNCATEGORIZED/1745480113402.jpg", "https://mainoss.duoxiaiche.com/UNCATEGORIZED/1745480117425.jpg", "https://mainoss.duoxiaiche.com/UNCATEGORIZED/1745480122350.jpg"],swiperHeight:400,//默认高度}},onLoad() {const firstImg = this.imgList[0] || ''this.getImgHeight(firstImg).then((heightRes) => {this.swiperHeight = heightRes})},methods: {getImgHeight(imageUrl){let containerHeight = 400return new Promise((resolve, reject) => {wx.getImageInfo({src: imageUrl,success: (res) => {const { width, height } = resuni.getSystemInfo({success: (res) => {const screenWidth = res.windowWidth;const aspectRatio = width / height;const imgHeight = screenWidth / aspectRatio;console.log('imgHeight---',imgHeight)containerHeight = imgHeight && imgHeight < 400 ? imgHeight : 400;resolve(containerHeight)},})},fail: (err) => {console.error('Failed to get image info', err)reject(containerHeight)},})})},// 点击显示图片showImage(index) {uni.previewImage({urls: this.imgList,current: index,indicator: 'number'});},}}
</script><style lang="scss" scoped>
.swiper {.swiper-image {width: 100%;}
}
</style>

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章：

uniapp 仿小红书轮播图效果

通过对小红书的轮播图分析&#xff0c;可得出以下总结&#xff1a; 1.单张图片时容器根据图片像素定高 2.多图时轮播图容器高度以首图为锚点 3.比首图长则固高左右留白 4.比首图短则固宽上下留白 代码如下&#xff1a; <template><view> <!--轮播--><s…...

编程日记 2025/6/30 16:02:39

审计效率升级！快速匹配Excel报表项目对应的Word附注序号

财务审计报告一般包括&#xff1a;封面、报告正文、财务报表&#xff08;Excel工作簿&#xff09;以及对应的财务报表附注&#xff08;Word文档&#xff09;、事务所营业执照以及注册会计师证件。 在审计报告出具阶段&#xff0c;为各报表项目填充对应的Word附注序号&#xff…...

编程日记 2025/6/29 11:47:13

Python 中 `r` 前缀：字符串处理的“防转义利器”

# Python 中 r 前缀&#xff1a;字符串处理的“防转义利器” 在 Python 编程过程中&#xff0c;处理字符串时经常会遇到反斜杠 \ 带来的转义问题&#xff0c;而 r 前缀的出现有效解决了这一困扰。它不仅能处理反斜杠的转义&#xff0c;还在多种场景下发挥着重要作用。接下来&a…...

编程日记 2025/6/29 11:50:31

1️⃣6️⃣three.js_光源

16、光源 3D虚拟工厂在线体验 在 Three.js 中&#xff0c;环境光&#xff08;AmbientLight&#xff09;、点光源&#xff08;PointLight&#xff09;、平行光&#xff08;DirectionalLight&#xff09;、 聚光灯&#xff08;SpotLight&#xff09;、半球光&#xff08;Hemisph…...

编程日记 2025/6/29 9:14:05

AD16如何执行DRC检测

AD16如何执行DRC检测 DRC检测主要用来查看走线是否出现通断&#xff0c;以及是否出现短路。 1)、点击“Tools”---“Design Rule Check…” 2)、全部勾选 3)、勾选“Electrical”中的“Batch”选项&#xff0c;参与DRC检测 4)、勾选“Routing”中的“Batch”选项&#xff0c;…...

编程日记 2025/6/29 10:17:54

PostgreSQL性能优化实用技巧‌

PostgreSQL的性能优化需从‌索引设计、查询调优、参数配置、硬件资源‌等多维度入手。以下为实战中验证有效的优化策略&#xff0c;适用于高并发、大数据量等场 一、索引优化&#xff1a;精准加速查询‌ ‌1.选择正确的索引类型‌ ‌BRIN索引‌&#xff1a;对按时间或数值顺…...

编程日记 2025/6/29 11:40:29

Vue3 ref与props

ref 属性 与 props 一、核心概念对比 特性ref (标签属性)props作用对象DOM 元素/组件实例组件间数据传递数据流向父组件访问子组件/DOM父组件 → 子组件响应性直接操作对象单向数据流&#xff08;只读&#xff09;使用场景获取 DOM/调用子组件方法组件参数传递Vue3 变化不再自…...

编程日记 2025/6/29 11:39:22

SpringBoot | 构建客户树及其关联关系的设计思路和实践Demo

关注&#xff1a;CodingTechWork 引言 在企业级应用中&#xff0c;客户关系管理&#xff08;CRM&#xff09;是核心功能之一。客户树是一种用于表示客户之间层级关系的结构&#xff0c;例如企业客户与子公司、经销商与下级经销商等。本文将详细介绍如何设计客户树及其关联关系…...

编程日记 2025/6/29 12:01:24

SpringCloud——负载均衡

一.负载均衡 1.问题提出 上一篇文章写了服务注册和服务发现的相关内容。这里再提出一个新问题&#xff0c;如果我给一个服务开了多个端口&#xff0c;这几个端口都可以访问服务。 例如&#xff0c;在上一篇文章的基础上&#xff0c;我又新开了9091和9092端口&#xff0c;现在…...

编程日记 2025/6/29 10:20:34

Springboot3+ JDK21 升级踩坑指南

目录 GetMapping和 RequestBody 一起使用时&#xff0c;会把请求方式由GET变为POST 变更默认的httpClient feign 超时配置失效 GetMapping和 RequestBody 一起使用时&#xff0c;会把请求方式由GET变为POST 变更默认的httpClient 添加依赖 <dependency><groupId&g…...

编程日记 2025/6/29 11:45:54

Qt UDP组播实现与调试指南

在Qt中使用UDP组播（Multicast）可以实现高效的一对多网络通信。以下是关键步骤和示例代码： 一、UDP组播核心机制 组播地址：使用D类地址（224.0.0.0 - 239.255.255.255）TTL设置：控制数据包传播范围（默认1，同一网段）网络接口：指定发送/接收的物理接口二、发送端实现 /…...

编程日记 2025/6/29 10:18:14

idea连接远程服务器kafka

一、idea插件安装 首先idea插件市场搜索“kafka”进行插件安装 二、kafka链接配置 1、检查服务器kafka配置 配置链接前需要保证远程服务器的kafka配置里边有配置好服务器IP&#xff0c;以及开放好kafka端口9092&#xff08;如果有修改 过端口的开放对应端口就好&#xff09; …...

编程日记 2025/6/29 11:40:10

第十节：性能优化高频题-虚拟DOM与Diff算法优化

优化策略&#xff1a;同层比较、静态节点标记、最长递增子序列算法 Key的作用&#xff1a;精确识别节点身份 虚拟DOM与Diff算法深度优化策略解析 一、核心优化策略 同层比较机制 Diff算法仅对比同一层级的虚拟节点&#xff0c;避免跨层级遍历带来的性能损耗。 • 实现原理&am…...

编程日记 2025/6/29 10:30:28

vmware workstation的下载地址页面

Fusion and Workstation | VMware...

编程日记 2025/6/29 10:25:24

kubernetes》》k8s》》Dashboard

安装Dashboard 因为我的Kubernetes 版本是 v1.28.2 对应的 Dashboard V2.7.0 wget -O https://raw.githubusercontent.com/kubernetes/dashboard/v2.7.0/aio/deploy/recommended.yaml # 因为默认是集群内访问的&#xff0c;需要追加 NodePort访问类型 vim recommended.yaml …...

编程日记 2025/6/29 9:53:48

软考：数值转换知识点详解

文章目录 1. 进制转换1.1 二进制&#xff08;Binary&#xff09;、八进制&#xff08;Octal&#xff09;、十进制&#xff08;Decimal&#xff09;、十六进制&#xff08;Hexadecimal&#xff09;之间的转换1.2 手动转换和计算方法1.3 使用编程语言进行进制转换 2. 数据类型转换…...

编程日记 2025/6/29 10:44:24

第15章：MCP服务端项目开发实战：性能优化

第15章：MCP服务端项目开发实战：性能优化 在构建和部署 MCP（Memory, Context, Planning）驱动的 AI Agent 系统时，性能和可扩展性是关键的考量因素。随着用户量、数据量和交互复杂度的增加，系统需要能够高效地处理请求，并能够平滑地扩展以应对更高的负载。本章将探讨 MCP…...

编程日记 2025/6/29 10:43:30

Windows申请苹果开发者测试证书Uniapp使用

注意事项 苹果设备，最好是iPhone XS以上，要不然下载不了Apple DeveloperopenSSL 要是V1版本的来生成证书，要不然HBuilder报错按步骤来，生成证书，生成标识符，添加测试设备，生成描述性文件注册苹果开发者账号 (如果有苹果账号直接登录) 苹果开发者官网 开通付费 点击右上…...

编程日记 2025/6/29 10:21:07

服务器数据恢复—NAS存储中raid5上层lv分区数据恢复案例

NAS数据恢复环境&#xff1a; QNAP TS-532X NAS设备中有两块1T的SSD固态硬盘和3块5T的机械硬盘。三块机械硬盘组建了一组RAID5阵列&#xff0c;两块固态硬盘组建RAID1阵列。划分了一个存储池&#xff0c;并通过精简LVM划分了7个lv。 NAS故障&#xff1a; 硬盘故障导致无法正常…...

编程日记 2025/6/29 9:16:39

uniapp跨平台开发---switchTab:fail page `/undefined` is not found

问题描述 在项目中新增了一个底部tab导航栏,点击底部tabBar,跳转失败,控制台打印错误信息switchTab:fail page /undefined is not found 排查思路 错误信息提示,switchTab跳转的页面路径变成了/undefined,排查新增的pages.json文件,发现pages,以及tabBar中的list均已经加入该导…...

编程日记 2025/6/29 11:12:09

详细讲解 QMutex 线程锁和 QMutexLocker 自动锁的区别

详细讲解 QMutex 线程锁和 QMutexLocker 自动锁的区别 下面我们详细拆解 Qt 中用于线程同步的两个核心类&#xff1a;QMutex 和 QMutexLocker。 &#x1f9f1; 一、什么是 QMutex&#xff1f; QMutex 是 Qt 中的互斥锁&#xff08;mutex&#xff09;类&#xff0c;用于防止多个…...

编程日记 2025/6/29 9:52:37

如何获取静态IP地址？完整教程

静态IP地址&#xff0c;因其固定不变的特性&#xff0c;在远程访问、服务器搭建、电商多开、游戏搬砖等场景中显得尤为重要。以下是获取静态IP地址的完整教程&#xff0c;涵盖家庭网络、企业网络和公网静态IP的配置方法&#xff1a; 一、什么是静态IP&#xff1f; 内网IP&…...

编程日记 2025/6/29 11:25:47

JavaScript 里创建对象

咱们来用有趣的方式探索一下 JavaScript 里创建对象的各种“魔法咒语”&#xff01; 想象一下&#xff0c;你是一位魔法工匠&#xff0c;想要在你的代码世界里创造各种奇妙的“魔法物品”&#xff08;也就是对象&#xff09;。你有好几种不同的配方和工具&#xff1a; 1. 随手…...

编程日记 2025/6/29 11:24:26

【华为HCIP | 华为数通工程师】821—多选解析—第十五页

多选794、以下关于高可用性网络特点的描述，正确的是哪些项? A、不会出现故障 B、不能频出现故障 C、一旦出现故障只通过人工干预恢复业务 D出现故障后能很快恢复 解析：高可用性网络拥有良好的可靠性，不间断转发NSF…...

编程日记 2025/6/29 11:42:08

Kaamel视角下的MCP安全最佳实践

在以AI为核心驱动的现代产品体系中&#xff0c;大模型逐渐从实验室走向生产环境&#xff0c;如何确保其在推理阶段的信息安全和隐私保护&#xff0c;成为各方关注的重点。Model Context Protocol&#xff08;MCP&#xff09; 作为一个围绕模型调用上下文进行结构化描述的协议&a…...

编程日记 2025/6/29 9:14:23

Kafka 命令行操作与 Spark-Streaming 核心编程总结

一、Kafka 命令行操作详解 1.创建 Topic 命令格式&#xff1a; kafka-topics.sh --create --zookeeper <zk节点列表> --topic <主题名> --partitions <分区数> --replication-factor <副本数> 参数说明&#xff1a; 分区数&#xff08;partitions…...

编程日记 2025/6/29 12:30:58

【华为OD机试真题】428、连续字母长度 | 机试真题+思路参考+代码解析（E卷）（C++）

文章目录 一、题目题目描述输入输出样例1样例2 一、代码与思路&#x1f9e0;C语言思路✅C代码 一、题目 参考&#xff1a;https://sars2025.blog.csdn.net/article/details/139492358 题目描述 ◎ 给定一个字符串&#xff0c;只包含大写字母&#xff0c;求在包含同一字母的子串…...

编程日记 2025/6/29 11:32:54

nodejs获取请求体的中间件 body-parse

虽然 Express 4.16.0 之后已经内置了处理请求体的功能&#xff08;express.json() 和 express.urlencoded()&#xff09;&#xff0c;但你也可以单独使用老牌中间件 body-parser&#xff0c;它仍然很常用&#xff0c;尤其在某些旧项目中。 &#x1f4e6; 一、安装 body-parser …...

编程日记 2025/6/28 16:35:26

5.学习笔记-SpringMVC(P61-P70)

SpringMVC-SSM整合-接口测试 (1)业务层接口使用junit接口做测试 (2)表现层用postman做接口测试 (3)事务处理— 1&#xff09;在SpringConfig.java&#xff0c;开启注解&#xff0c;是事务驱动 2&#xff09;配置事务管理器&#xff08;因为事务管理器是要配置数据源对象&…...

编程日记 2025/6/29 12:16:37

腾讯云服务器安全——服务防火墙端口放行

点击服务进入安全策略 添加规则...

编程日记 2025/6/29 10:39:24

mfc学习（一）

mfc为微软创建的一个类qt框架的客户端程序&#xff0c;只不过因为微软目前有自己 的亲身儿子C#&#xff08;.net&#xff09;,所以到2010没有进行维护。然后一些的工业企业还在继续进行维护相关的内容。我目前就接手一个现在这样的项目&#xff0c;其实本质与qt的思路是差不多的…...

编程日记 2025/6/29 10:05:02

【MQ篇】初识RabbitMQ保证消息可靠性

&#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xff0c;可以多多支持一下&#xff0c;感谢&#x1f917;&#xff01; &#x1f31f;了解 MQ 请看 &#xff1a; 【MQ篇】初识MQ&#xff01; 其他优质专栏&#xff1a; 【&…...

编程日记 2025/6/29 12:14:29

神经网络基础[ANN网络的搭建]

神经网络 人工神经网络&#xff08; Artificial Neural Network&#xff0c; 简写为ANN&#xff09;也简称为神经网络&#xff08;NN&#xff09;&#xff0c;是一种模仿生物神经网络结构和功能的计算模型。各个神经元传递复杂的电信号&#xff0c;树突接收到输入信号&#xf…...

编程日记 2025/6/29 10:55:44

【技术派后端篇】整合WebSocket长连接实现消息实时推送

在技术派平台中&#xff0c;实现了文章被点赞或评论后&#xff0c;在右上角实时弹出消息提醒的功能。相较于之前仅有的消息通知红色标识&#xff0c;这种实时通知在交互体验上有显著提升。本文将详细介绍如何借助WebSocket实现消息的实时通知。 1 基础知识点 1.1 相关概念 W…...

编程日记 2025/6/29 10:45:56

​Janus Pro

目录 一、模型概述与开源情况 二、模型能力与性能 三、竞品分析 四、部署成本与个人部署成本比较 五、其他维度比较 1. 模型架构与创新性 2. 社区支持与生态系统 3. 更新频率与维护 4. 适用场景与灵活性 5. 商业化潜力 六、总结 Janus Pro 是中国初创公司 DeepSeek …...

编程日记 2025/6/29 12:17:29

[密码学实战]在Linux中实现SDF密码设备接口

[密码学实战]在Linux中实现SDF密码设备接口 引言 在密码学应用开发中，SDF（Security Device Interface）作为中国国家密码管理局制定的密码设备接口标准，被广泛应用于金融、政务等领域的安全系统中。本文将以GmSSL国产密码库为基础，手把手指导在Linux系统中部署SoftSDF——…...

编程日记 2025/6/29 11:40:51

机器学习基础 - 分类模型之SVM

SVM：支持向量机 文章目录 SVM：支持向量机简介基础准备1. 线性可分2. 最大间隔超平面3. 什么是支持向量？4. SVM 能解决哪些问题？5. 支持向量机的分类硬间隔 SVM0. 几何间隔与函数间隔1. SVM 最优化问题2. 对偶问题1. 拉格朗日乘数法 - 等式约束优化问题2. 拉格朗日乘数法 - …...

编程日记 2025/6/29 10:51:04

PostgreSQL 中的权限视图

PostgreSQL 中的权限视图 PostgreSQL 提供了多个系统视图来查询权限信息&#xff0c;虽然不像 Oracle 的 DBA_SYS_PRIVS 那样集中在一个视图中&#xff0c;但可以通过组合以下视图获取完整的系统权限信息。 一 主要权限相关视图 Oracle 视图PostgreSQL 对应视图描述DBA_SYS_…...

编程日记 2025/6/29 11:11:38

pnpm install报错：此系统上禁止运行脚本

依赖安装 报错信息&#xff1a; pnpm : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\pnpm.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies。 所在位置 行:1 …...

编程日记 2025/6/29 9:14:27

解决yarn install 报错 error \node_modules\electron: Command failed.

在电脑重装系统后,重新安装项目依赖,遇到这一报错 完整报错信息如下: error D:\xxxxx\xxxxxx\node_modules\electron: Command failed. Exit code: 1 Command: node install.js Arguments: Directory: D:\xxxxx\xxxxx\node_modules\electron Output: HTTPError: Response cod…...

编程日记 2025/6/29 11:50:44

深度学习3.7 softmax回归的简洁实现

import torch from torch import nn from d2l import torch as d2lbatch_size 256 train_iter, test_iter d2l.load_data_fashion_mnist(batch_size)3.7.1 初始化模型参数 net nn.Sequential(nn.Flatten(), nn.Linear(784, 10))def init_weights(m):if type(m) nn.Linear:…...

编程日记 2025/6/29 9:14:19

Linux424 chage密码信息 gpasswd 附属组

https://chat.deepseek.com/a/chat/s/e55a5e85-de97-450d-a19e-2c48f6669234...

编程日记 2025/6/29 10:54:01

Spring Boot单元测试实战指南：从零到高效测试

在Spring Boot开发中&#xff0c;单元测试是保障代码质量的核心环节。本文将基于实际开发场景&#xff0c;手把手教你如何快速实现分层测试、模拟依赖、编写高效断言&#xff0c;并分享最佳实践&#xff01; 一、5分钟环境搭建 添加依赖 在pom.xml中引入spring-boot-starter-te…...

编程日记 2025/6/29 11:37:17

Netty线上如何做性能调优？

大家好&#xff0c;我是锋哥。今天分享关于【Netty线上如何做性能调优&#xff1f;】面试题。希望对大家有帮助&#xff1b; Netty线上如何做性能调优&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在使用 Netty 进行线上服务时&#xff0c;性能调优是…...

编程日记 2025/6/29 11:26:54

总结-SQL注入分类手法注入漏洞总结性分化说明

目录 关键要点 按参数类型分类 按提交方式分类 按反馈结果分类 其他高级注入类型 最新漏洞动态 防御措施 调查笔记&#xff1a;SQL注入类型与详细分析 一、按参数类型分类 二、按提交方式分类 三、按反馈结果分类 四、其他高级注入类型 五、最新漏洞动态 六、防御…...

编程日记 2025/6/29 10:20:41

Linux:进程的创建进程的终止

进程的创建 fork fork是c语言中的一个函数&#xff0c;用于创建新的子进程&#xff0c;它存放在<unistd.h>的头文件中 当我们运行程序时&#xff0c;如果使用了fork函数那么就会为这个进程创建一个它的子进程&#xff0c;这个子进程会继承父进程的所有数据和代码&…...

编程日记 2025/6/29 9:15:24

[C#]反射的实战应用,实际数据模拟

long? value null; // 看它是不是 HEX_STRING var dtAttr prop.GetCustomAttribute<DataTypeAttribute>(); if (dtAttr ! null && dtAttr.DataType DataType.HEX_STRING) {// 去掉可能的 "0x" 前缀string txt attribute.Value.StartsWith("0…...

编程日记 2025/6/29 12:29:45

机器人灵巧手有刷与无刷空心杯电机解析

一、电机结构分析 （一）有刷空心杯电机结构 有刷空心杯电机主要由上壳、碳刷、连接板、换向器线圈、外壳、轴承、永磁体、下壳及轴承密封圈组成。碳刷与换向器直接接触，负责传导电流，使线圈在永磁体产生的磁场中受力转动。这种机械换向方式虽直接，但碳刷磨损会影响电机寿命…...

编程日记 2025/6/29 9:14:18

JetBrains GoLang IDE无限重置试用期，适用最新2025版

注意本文仅用于学习使用&#xff01;&#xff01;&#xff01; 本文在重置2024.3.5版本亲测有效&#xff0c;环境为window(mac下应该也一样奏效) 之前eval-reset插件只能在比较低的版本才能起作用。 总结起来就一句&#xff1a;卸载重装&#xff0c;额外要删掉旧安装文件和注册…...

编程日记 2025/6/29 12:08:02

【网络应用程序设计】实验四：物联网监控系统

个人博客&#xff1a;https://alive0103.github.io/ 代码在GitHub&#xff1a;https://github.com/Alive0103/XDU-CS-lab 能点个Star就更好了&#xff0c;欢迎来逛逛哇~❣ 主播写的刚够满足基本功能&#xff0c;多有不足&#xff0c;仅供参考&#xff0c;还请提PR指正&#xff…...

编程日记 2025/6/29 9:17:04