当前位置: 首页 > 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;},

http://www.lryc.cn/news/199669.html

相关文章:

  • 【Proteus仿真】【Arduino单片机】蜂鸣器
  • seatunnel web ui 构建时报错
  • Js使用ffmpeg在视频中添加png或gif
  • 多线程 Leetcode 打印零与奇偶数
  • 杭电oj--数列有序
  • PHPEXCEL解决行数超过65536不显示问题
  • 新媒体时代如何做好新型的网络口碑营销?
  • MySQL中InnoDB插入缓冲区(Insert Buffer)
  • VUE前端判断是电脑端还是移动端
  • OpenGL —— 2.8、漫游之摄像机飞行移动(附源码,glfw+glad)
  • AM@麦克劳林公式逼近以及误差分析
  • gitlab 离线安装问题解决:NOKEY,signature check fail
  • uniapp使用uQRCode绘制二维码,下载到本地,调起微信扫一扫二维码核销
  • 手写一个PrattParser基本运算解析器3: 基于Swift的PrattParser的项目概述
  • 三江学院“火焰杯”软件测试高校就业选拔赛颁奖仪式
  • 面试题-消息中间件篇-主流的消息中间件
  • PyQt学习笔记-获取Hash值的小工具
  • 【(数据结构)— 双向链表的实现】
  • 酷克数据发布HD-SQL-LLaMA模型,开启数据分析“人人可及”新时代
  • FL Studio21最新中文破解进阶高级完整版安装下载教程
  • MDN--Web性能
  • Vue3.js:自定义组件 v-model
  • AI虚拟主播开发实战(附源码)
  • innoDB如何解决幻读
  • Git - 导出(archive)、忽略(gitignore)、隐藏(Stash)、合并冲突(merge)的解决方法
  • 【Javascript】‘var‘ is used instead of ‘let‘ or ‘const‘
  • 金融统计学方法:神经网络
  • 任何人不知道这款超实用的配音软件,我都会伤心的OK?
  • Linux查看日志文件的常用命令
  • AcWing算法分享系列——二分图