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

(H5轮播)vue一个轮播里显示多个内容/一屏展示两个半内容

效果图 :

html: 

  <div class="content"><van-swipeclass="my-swipe com-long-swipe-indicator":autoplay="2500"indicator-color="#00C4FF"><van-swipe-itemclass="flex-row-wrap"v-for="(items, index) in Math.ceil(conferenceData.length / 9)":key="`guests_${index}`"><divv-for="(item, index) in conferenceData.slice((items - 1) * 9,items * 9)":key="index"class="conference-guests-item-box"><divclass="conference-guests-item-img flex-column-start-end":style="{ background: 'url(' + item.picture + ')' }"><div class="conference-guests-item-text"><div class="conference-guests-item-name">{{ item.name }}</div><div class="conference-guests-item-company">{{ item.company }}</div><div class="conference-guests-item-profession">{{ item.profession }}</div></div></div></div></van-swipe-item></van-swipe></div>

return里声明的数据或者直接使用后台返回的数据

 conferenceData: [{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 0,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 1,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 2,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 3,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 4,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 5,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 6,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 7,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 8,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 9,webGuestId: "3775644503695286273",},{company: "科技公司",name: "张三",pawId: "3760726639167201673",picture:"../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",profession: "执行董事/董事长兼首席执行官",sort: 10,webGuestId: "3775644503695286273",},], //嘉宾数据

css:

.flex-row-wrap {display: flex;flex-direction: row;flex-wrap: wrap;
}
.flex-column-start-end {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;
}
.conference-guests-item-box {flex: 0 0 33.33%;}.conference-guests-item-img {width: 100%;height: 2.28rem;background-size: 100% !important;}.conference-guests-item-text {padding: 0 0 0.06rem 0.2rem;font-size: 0.12rem;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #ffffff;line-height: 0.16rem;}.conference-guests-item-name {font-size: 0.16rem;font-family: SourceHanSansCN-Heavy, SourceHanSansCN;font-weight: 800;color: #ffffff;line-height: 0.23rem;margin-bottom: 0.08rem;}

效果图:

html:

cnLeftItem:[]为后台返回数据

      <van-swipeclass="com-long-swipe-indicator":loop="false":width="swipeWidth"><van-swipe-item v-for="item in cnLeftItem" :key="item.webNewsId"><a:href="item.jumpLink || 'javascript:;'"target="_blank"class="report-item default-bg":style="{'background-image': `url(${item.cover})`,}"><span class="report-item-news-title van-multi-ellipsis--l2">{{ item.newsTitle }}</span></a></van-swipe-item></van-swipe>

js:

  created() {//一定要写在created里,在数据渲染完成之前拿到屏幕宽度this.bodyWidth = window.innerWidth;this.swipeWidth = window.innerWidth * 0.3946;},

相关文章:

(H5轮播)vue一个轮播里显示多个内容/一屏展示两个半内容

效果图 : html: <div class"content"><van-swipeclass"my-swipe com-long-swipe-indicator":autoplay"2500"indicator-color"#00C4FF"><van-swipe-itemclass"flex-row-wrap"v-for"(items, index) in M…...

【Proteus仿真】【Arduino单片机】蜂鸣器

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用蜂鸣器等。 主要功能&#xff1a; 系统运行后&#xff0c;蜂鸣器播放音乐。 二、软件设计 /* 作者&#xff1a;嗨小易&#xff08;QQ&#x…...

seatunnel web ui 构建时报错

报错内容如下 Failed to execute goal com.diffplug.spotless:spotless-maven-plugin:2.29.0:check (default) on project seatunnel-web: The following files had format violations:Failed to execute goal com.diffplug.spotless:spotless-maven-plugin:2.29.0:check (defa…...

Js使用ffmpeg在视频中添加png或gif

Js使用ffmpeg在视频中添加png或gif ffmpeg 使用场景是需要在web端对视频进行编辑 添加图片和gif。 注意: 以下所有的使用案例均基于vue3 setup。 同时由于ffmpeg版本不同会导致使用的api不同&#xff0c;使用案例前需要注意ffmpeg版本问题。 如果使用的是0.12需要使用新的…...

多线程 Leetcode 打印零与奇偶数

现有函数 printNumber 可以用一个整数参数调用&#xff0c;并输出该整数到控制台。 例如&#xff0c;调用 printNumber(7) 将会输出 7 到控制台。 给你类 ZeroEvenOdd 的一个实例&#xff0c;该类中有三个函数&#xff1a;zero、even 和 odd 。ZeroEvenOdd 的相同实例将会传递…...

杭电oj--数列有序

有n(n<100)个整数&#xff0c;已经按照从小到大顺序排列好&#xff0c;现在另外给一个整数x&#xff0c;请将该数插入到序列中&#xff0c;并使新的序列仍然有序。 输入数据包含多个测试实例&#xff0c;每组数据由两行组成&#xff0c;第一行是n和m&#xff0c;第二行是已…...

PHPEXCEL解决行数超过65536不显示问题

起因自然是导出数据到excel文件时&#xff0c;数据缺少现象。 百度讲解是将xls文件另存为xlsx文件。 除了这里的原因&#xff0c;还有一点是phpExcel存在两个写入类PHPExcel_Writer_Excel2007和PHPExcel_Writer_Excel5&#xff0c;而只有PHPExcel_Writer_Excel2007支持超过65…...

新媒体时代如何做好新型的网络口碑营销?

从人类开始交换商品的时代开始&#xff0c;口碑营销就已经存在&#xff0c;是靠口耳传播的营销方式。小马识途认为进入当今移动互联网时代&#xff0c;口碑营销又有了新的发展&#xff0c;网络口碑营销推广开始普及。营销人员将传统口碑营销与移动互联网营销相结合&#xff0c;…...

MySQL中InnoDB插入缓冲区(Insert Buffer)

一、插入缓冲区的基本原理 插入缓冲区&#xff08;Insert Buffer&#xff0c;也称作 Change Buffer&#xff09;&#xff0c;是InnoDB存储引擎的一种内部机制&#xff0c;它允许系统将对非聚集索引页的写操作&#xff08;例如插入、删除和更新&#xff09;暂时缓存在内存中&am…...

VUE前端判断是电脑端还是移动端

背景需求 ruoyi框架&#xff0c;前后端分离。现在要在用户访问的时候根据不同的设备跳转到不同的登录页面。 教程 router/index.js 修改src/router/index.js&#xff0c;在这里增加自己的要跳转的页面 permission.js 在白名单中添加自己的登录页面 增加以下识别的代码 le…...

OpenGL —— 2.8、漫游之摄像机飞行移动(附源码,glfw+glad)

源码效果 C源码 纹理图片 需下载stb_image.h这个解码图片的库&#xff0c;该库只有一个头文件。 具体代码&#xff1a; vertexShader.glsl #version 330 corelayout(location 0) in vec3 aPos; layout(location 1) in vec2 aUV;out vec2 outUV;uniform mat4 _modelMatrix; …...

AM@麦克劳林公式逼近以及误差分析

abstract 麦克劳林公式及其近似表示的应用误差估计和分析 Lagrange型泰勒公式的估计误差 由Lagrange型余项泰勒公式可知,多项式 p n ( x ) p_n(x) pn​(x)近似表达函数 f ( x ) f(x) f(x)时,其误差为 ∣ R n ( x ) ∣ |R_{n}(x)| ∣Rn​(x)∣ R n ( x ) R_{n}(x) Rn​(x) f …...

gitlab 离线安装问题解决:NOKEY,signature check fail

1&#xff0c;rpm安装gitlab问题 test1:/opt # rpm -ivh gitlab-ce-16.0.3-ce.0.el7.x86_64.rpm --force warning: gitlab-ce-16.0.3-ce.0.el7.x86_64.rpm: Header V4 RSA/SHA1 Signature, key ID f27eab47: NOKEY error: [upel]: gitlab-ce NOKEY error: [upel]: gitlab-ce …...

uniapp使用uQRCode绘制二维码,下载到本地,调起微信扫一扫二维码核销

1.效果 2.在utils文件夹下创建uqrcode.js // uqrcode.js //--------------------------------------------------------------------- // github https://github.com/Sansnn/uQRCode //---------------------------------------------------------------------let uQRCode {…...

手写一个PrattParser基本运算解析器3: 基于Swift的PrattParser的项目概述

点击查看 基于Swift的PrattParser项目 PrattParser项目概述 前段时间一直想着手恶补 编译原理 的相关知识, 一开始打算直接读大学的 编译原理, 虽然内容丰富, 但是着实抽象难懂. 无意间看到B站的熊爷关于普拉特解析器相关内容, 感觉是一个非常好的切入点.所以就写了基于Swift版…...

三江学院“火焰杯”软件测试高校就业选拔赛颁奖仪式

11月25日下午&#xff0c;“火焰杯”软件测试开发选拔赛及三江-慧科卓越工程师班暑期编程能力训练营颁奖仪式在s楼会议室隆重举行。计算机科学与工程学院院长刘亚军、副院长叶传标、曹阳、吴德、院党总支副书记王兰英、系主任杨少雄、慧科企业代表尹沁伊人、项目负责人王旭出席…...

面试题-消息中间件篇-主流的消息中间件

消息中间件篇 第一章 主流的消息中间件对比 1、主流的消息中间件有 Kafka、RabbitMQ、ActiveMQ 等。 Kafka&#xff1a; Kafka 是一种高吞吐量、分布式、可扩展的发布/订阅消息系统&#xff0c;主要用于大数据处理和分析。Kafka 采用消息日志的方式来存储消息&#xff0c;可以…...

PyQt学习笔记-获取Hash值的小工具

目录 一、概述1.1 版本信息&#xff1a;1.2 基本信息&#xff1a;1.2.1 软件支持的内容&#xff1a;1.2.2 支持的编码格式 1.3 软件界面图 二、代码实现2.1 View2.2 Controller2.3 Model 三、测试示例 一、概述 本工具居于hashlibPyQtQFileDialog写的小工具&#xff0c;主要是…...

【(数据结构)— 双向链表的实现】

&#xff08;数据结构&#xff09;— 双向链表的实现 一.双向链表的结构二. 双向链表的实现2.1 头文件 ——双向链表的创建及功能函数的定义2.2 源文件 ——双向链表的功能函数的实现2.3 源文件 ——双向链表功能的测试2.4 双向链表各项功能测试运行展示2.4.1 双向链表的初始化…...

酷克数据发布HD-SQL-LLaMA模型,开启数据分析“人人可及”新时代

随着行业数字化进入深水区&#xff0c;企业的关注点正在不断从“数字”价值转向“数智”价值。然而&#xff0c;传统数据分析的操作门槛与时间成本成为了掣肘数据价值释放的阻力。常规的数据分析流程复杂冗长&#xff0c;需要数据库管理员设计数据模型&#xff0c;数据工程师进…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

代理服务器-LVS的3种模式与调度算法

作者介绍&#xff1a;简历上没有一个精通的运维工程师。请点击上方的蓝色《运维小路》关注我&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们上一章介绍了Web服务器&#xff0c;其中以Nginx为主&#xff0c;本章我们来讲解几个代理软件&#xff1a…...