web-app uniapp监测屏幕大小的变化对数组一行展示数据作相应处理
web-app uniapp监测屏幕大小的变化对数组一行展示数据作相应处理

1.uni.getSystemInfoSync().screenWidth; 获取屏幕宽度
2.uni.onWindowResize() 实时监测屏幕宽度变化
3.根据宽度的大小拿到每行要展示的数量itemsPerRow
4.为了确保样式能够根据 itemsPerRow 动态调整,可以使用 CSS 变量或动态类。width: calc((100% - 40rpx * (itemsPerRow - 1)) / itemsPerRow);
<template><view class="index"><!-- list表单 --><view class="activityList"><view class="innerContent"><!-- conent-list --><view class="content-list"><view class="list-row" v-for="(row, rowIndex) in groupedCollectionList" :key="rowIndex"><view class="list-item" v-for="(item, index) in row" :key="index" @click="goDetail(item)"><view class="item-left" v-if="item.picture"><image class="img" :src="item.picture" /></view><view class="item-right"><view class="title space" v-if="item.name.length > 10">{{ item.name.slice(0, 10) }}...</view><view class="title space" v-else>{{ item.name }}</view><view class="title space">{{ item.createdTime }}</view></view></view></view></view></view></view></view></template><script>
export default {data() {return {list:[],itemsPerRow:1,// 默认每行显示1个};},computed: {// 在 computed 中添加 groupedCollectionList 以根据 itemsPerRow 分组数据。groupedCollectionList() {const rows = [];for (let i = 0; i < this.list.length; i += this.itemsPerRow) {rows.push(this.list.slice(i, i + this.itemsPerRow));}return rows;},},beforeMount() {this.updateScreenSize(); //初始化屏幕宽度uni.onWindowResize(this.updateScreenSize); // 监听屏幕尺寸变化},beforeDestroy() {uni.offWindowResize(this.updateScreenSize); // 移除监听器},methods: {// 获取当前屏幕宽度getScreenWidth() {return uni.getSystemInfoSync().screenWidth;},updateScreenSize(){const width = this.getScreenWidth()console.log(width,'width');// 562<width&&width<687if (width > 640) {this.itemsPerRow = 3;} else if (562<width&&width < 640) {this.itemsPerRow = 2;} else {this.itemsPerRow = 1;}},getList() {// this.$modal.loading("加载中..");this.list = [{picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",name:"测试1",createdTime:"2025-1-1"},{picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",name:"测试2",createdTime:"2025-1-1"},{picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",name:"测试3",createdTime:"2025-1-1"},{picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",name:"测试4",createdTime:"2025-1-1"}]},},async onLoad(e) {const { id } = ethis.id = id},onShow() {this.pageNum = 1;this.getList();},};
</script><style lang="scss" scoped>
.index {width: 100%;min-height: 100vh;background: #f7f8fc;box-sizing: border-box;padding-bottom: calc(110rpx + env(safe-area-inset-bottom));.activityList {width: 100%;padding: 0 20rpx;padding-top: 24rpx;.innerContent {width: 100%;background: #ffffff;border-radius: 20rpx;padding: 20rpx;.content-list {padding: 20rpx;padding-right: 0rpx;.list-row {display: flex;justify-content: space-between;margin-bottom: 20rpx;}.list-item {// 确保样式能够适应不同数量的每行显示。width: calc((100% - 40rpx * (itemsPerRow - 1)) / itemsPerRow);height: 152rpx;display: flex;margin-bottom: 20rpx;.item-left {width: 270rpx;height: 152rpx;border-radius: 10rpx;position: relative;.img {width: 270rpx;height: 152rpx;border-radius: 10rpx;}}.item-right {flex: 1;padding: 10rpx 0rpx;display: flex;flex-direction: column;justify-content: space-between;width: 200rpx;padding-left: 20rpx;.title {font-size: 30rpx;font-family: PingFang SC, PingFang SC-Regular;font-weight: Regular;text-align: left;color: #333333;line-height: 41rpx;}.title.space {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}}}}}}
}
</style>相关文章:
web-app uniapp监测屏幕大小的变化对数组一行展示数据作相应处理
web-app uniapp监测屏幕大小的变化对数组一行展示数据作相应处理 1.uni.getSystemInfoSync().screenWidth; 获取屏幕宽度 2.uni.onWindowResize() 实时监测屏幕宽度变化 3.根据宽度的大小拿到每行要展示的数量itemsPerRow 4.为了确保样式能够根据 items…...
2025年VGC大众汽车科技社招入职测评综合能力英语口语SHL历年真题汇总、考情分析
早在1978年,大众汽车集团就开始了与中国的联系。1984年,集团在华的第一家合资企业—上汽大众汽车有限公司奠基成立;1991年,一汽-大众汽车有限公司成立;2017年,大众汽车(安徽)有限公司…...
Linux中配置Java环境变量
基本工作 1.官网下载java 1.8地址(需要注册一个oracle账户): Java Downloads | Oracle 点击上面的链接,滚动页面到最下面就可以看到下载界面,如下图 选择适合自己系统的版本。 本文选用 jdk-8u431-linux-x64.tar.g…...
完全自定义Qt翻译功能,不使用Qt Linguist的.ts 和 .qm类型翻译
这篇文章展示了集成Qt Linguist 的功能。 但是有时候Qt的翻译功能比较繁琐,我们简单项目只需要使用本地化功能,将中文字符串导入到项目中,避免编码格式问题导致的乱码。 只需要使用一个简单的json或者其他格式的本地文件作为映射的key/value.…...
551 灌溉
常规解法: #include<bits/stdc.h> using namespace std; int n,m,k,t; const int N105; bool a[N][N],b[N][N]; int cnt; //设置滚动数组来存贮当前和下一状态的条件 //处理传播扩散问题非常有效int main() {cin>>n>>m>>t;for(int i1;i&l…...
php函数性能优化中应注意哪些问题
PHP 函数性能优化中的注意事项 在 PHP 应用中优化函数性能对于提升整体运行效率至关重要。以下是一些需要注意的关键问题: 1. 避免内联变量 将变量内联到函数调用中会增加不必要的开销。例如: function sum($a, $b) {return $a $b; }// 不要这样做&…...
安科瑞 Acrel-1000DP 分布式光伏监控系统在工业厂房分布式光伏发电项目中的应用
吕梦怡 18706162527 摘 要:常规能源以煤、石油、天然气为主,不仅资源有限,而且会造成严重的大气污染,开发清洁的可再生能源已经成为当今发展的重要任务,“节能优先,效率为本”的分布式发电能源符合社会发…...
鼠标自动移动防止锁屏的办公神器 —— 定时执行专家
目录 ◆ 如何设置 ◇ 方法1:使用【执行Nircmd命令】任务 ◇ 方法2:使用【模拟键盘输入】任务 ◆ 定时执行专家介绍 ◆ 定时执行专家最新版下载 ◆ 如何设置 ◇ 方法1:使用【执行Nircmd命令】任务 1、点击工具栏第一个图标【新建任务】&…...
各种特种无人机快速发展,无人机反制技术面临挑战
随着科技的飞速发展,各种特种无人机在军事、民用等领域得到了广泛应用,其性能不断提升,应用场景也日益丰富。然而,无人机反制技术的发展确实面临一定的挑战,难以完全跟上无人机技术的快速发展步伐。以下是对这一问题的…...
深入学习RabbitMQ的Direct Exchange(直连交换机)
RabbitMQ作为一种高性能的消息中间件,在分布式系统中扮演着重要角色。它提供了多种消息传递模式,其中Direct Exchange(直连交换机)是最基础且常用的一种。本文将深入介绍Direct Exchange的原理、应用场景、配置方法以及实践案例&a…...
HTML实战课堂之启动动画弹窗
一:代码片段讲解 小提示:下面是一个包含启动页和弹窗的完整示例。这个示例包括一个简单的启动页和一个弹窗,当用户点击启动页上的按钮时,会显示弹窗。 1. **HTML结构**: - #startPage:启动页,包…...
将本地的 Git 仓库上传到 GitHub 上(github没有该仓库)
文章目录 步骤 1:在 GitHub 上创建新仓库步骤 2:配置本地仓库步骤 3:添加远程仓库地址步骤 4:推送本地代码到 GitHub验证上传 步骤 1:在 GitHub 上创建新仓库 登录 GitHub: 打开浏览器并访问 GitHub。使用自…...
【Linux】模拟Shell命令行解释器
一、知识补充 1.1 snprintf snprintf() 是 C语言的一个标准库函数,定义在<stdio.h>头文件中。 snprintf() 函数的功能是格式化字符串,并将结果存储在指定的字符数组中。该函数的原型如下: int snprintf(char *str, size_t size, con…...
G-Star Landscape 2.0 重磅发布,助力开源生态再升级
近日,备受行业瞩目的 G-Star Landscape 迎来了其 2.0 版本的发布,这一成果标志着 GitCode 在开源生态建设方面又取得了重要进展。 G-Star Landscape仓库链接: https://gitcode.com/GitCode-official-team/G-Star-landscape 2024 GitCode 开…...
Lianwei 安全周报|2024.1.7
以下是本周「Lianwei周报」,我们总结推荐了本周的政策/标准/指南最新动态、热点资讯和安全事件,保证大家不错过本周的每一个重点! 政策/标准/指南最新动态 01 国家发改委等三部门印发《国家数据基础设施建设指引》 国家数据基础设施是从数据…...
ASP.NET Core 实现微服务 - Consul 配置中心
这一次我们继续介绍微服务相关组件配置中心的使用方法。本来打算介绍下携程开源的重型配置中心框架 apollo 但是体系实在是太过于庞大,还是让我爱不起来。因为前面我们已经介绍了使用Consul 做为服务注册发现的组件 ,那么干脆继续使用 Consul 来作为配置…...
使用redis的5种常用场景
文章目录 1. 缓存热点数据2. 分布式锁3. 计数器和限流器4. 消息队列5. 会话管理总结 在日常开发工作中,Redis作为一款高性能的内存数据库,凭借其强大的功能特性和卓越的性能表现,已经成为了许多项目中不可或缺的组件。本文将详细介绍Redis在实…...
微信小程序防止重复点击事件
直接写在app.wpy里面,全局可以调用 // 防止重复点击事件preventActive(fn) {const self this;if (this.globalData.PageActive) {this.globalData.PageActive false;if (fn) fn();setTimeout(() > {self.globalData.PageActive true;}, 3000); //设置该时间内…...
PySpark用sort-merge join解决数据倾斜的完整案例
假设有两个大表 table1 和 table2 ,并通过 sort-merge join 来解决可能的数据倾斜问题。 from pyspark.sql import SparkSession from pyspark.sql.functions import col# 初始化SparkSession spark SparkSession.builder.appName("SortMergeJoinExample&quo…...
sklearn-逻辑回归-制作评分卡
目录 数据集处理 分箱 分多少个箱子合适 分箱要达成什么样的效果 对一个特征进行分箱的步骤 分箱的实现 封装计算 WOE 值和 IV值函数 画IV曲线,判断最佳分箱数量 结论 pd.qcut 执行报错 功能函数封装 判断分箱个数 在银行借贷场景中,评分卡是…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件,这个上传文件是整体功能的一部分,文件在上传的过程中…...
大模型——基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程
基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网:https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘,大小大概2.9G,做这行最忌讳的就是安装软件全装C盘,所以我调整了下安装路径。 新建安装目录:E:\MyS…...
【Ftrace 专栏】Ftrace 参考博文
ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...
