vue使用swiper三行轮播问题

news2024/12/27 3:35:40

1、轮播图设置属性slidesPerColumn:3实现不了,解决方案如下:

this.scheduleData是后台请求的数据,通过3个一组分组转换为this.scheduleListThreede 的数据!

2、逻辑处理如下:

computed: {

      scheduleListThree: function () {

          let index = 0;

          let count = 3;

          let arrThree = [];

          let data = this.scheduleData;

          for (let i = 0; i < this.scheduleData.length; i++) {

            index = parseInt(i / count);

            if (arrThree.length <= index) {

              arrThree.push([]);

            }

            arrThree[index].push(data[i])

          }

          return arrThree

        }

    },

   mounted() {

   this.$nextTick(() => {

          var swiper = new Swiper(this.$refs.scheduleSwipers, {

            // slidesPerColumn: 3,//显示行,注意这里代码不用写,默认显示一行

           spaceBetween:10,

            autoplay: {

              delay: 3000,

              disableOnInteraction: false, 

              stopOnLastSlide: false,

            },

            loop: false,

            observer: true,

            observeParents: true,

          });

        })

   }

3、页面处理如下:

 <div class="swiper-container"  ref="scheduleSwipers">

      <div class="swiper-wrapper">

            <div class="swiper-slide" v-for="(item,index) in scheduleListThree" :key="index"> 

                   <div   v-for="(item1,index1) in item" :key="index1"> 

                        <!-- 展现数据用item1 即可-->

                   </div>

             </div>

     </div>

</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/671461.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

做测试不会 SQL?超详细的 SQL 查询语法教程来啦!

前言 作为一名测试工程师&#xff0c;工作中在对测试结果进行数据比对的时候&#xff0c;或多或少要和数据库打交道的&#xff0c;要和数据库打交道&#xff0c;那么一些常用的sql查询语法必须要掌握。最近有部分做测试小伙伴表示sql查询不太会&#xff0c;问我有没有sql查询语…

list赋值方法add()...和set()简介

目录 一、方法展示 二、add() 方法介绍 2.1.add&#xff08;E element&#xff09; 2.1.1源码 2.1.2.实例截图 2.1.3.Null引起的题外话 2.2.add(int index, E element) 2.2.1.源码 2.2.2.示例截图 2.2.3. add()引起IndexOutOfBoundsException简介 三、addAll()方法…

CSS查缺补漏之《媒体查询@media与BFC》

示例代码如下&#xff1a; <div class"box">世界你好</div> .box {width: 200px;height: 200px;background-color: yellow;color: white;font-size: 24px;text-align: center;line-height: 200px; } 媒体类型 媒体类型允许指定文件将如何在不同媒体上…

OpenCV——《图像平滑》结果输出对比《形态学操作》

1.图像平滑 图像平滑是一项简单且使用频率很高的图像处理方法&#xff0c;可以用来压制、弱化或消除图像中的细节、突变、边缘和噪声&#xff0c;最常见的是用来减少图像上的噪声。 常用的滤波器主要为&#xff1a; 均值滤波器&#xff1a;并不能完全消除噪声&#xff0c;只能…

【服务器】搭建hMailServer 服务实现远程发送邮件

typora-copy-images-to: upload hMailServer 是一个邮件服务器,通过它我们可以搭建自己的邮件服务,通过cpolar内网映射工具即可实现远程发送邮件,不需要使用公网服务器,不需要域名,而且邮件账号名称可以自定义. 下面以windows 10系统为环境,介绍使用方法: 1. 安装hMailServe…

小鹏G9高压平台800V电驱动实拍

近日&#xff0c;小鹏汽车董事长何小鹏在其个人社交账号上透露&#xff0c;小鹏G9正按原定计划按部就班推进节奏&#xff0c;将于8月启动预订&#xff0c;9月正式迎来上市&#xff0c;上市后很快就会启动用户交付。 图片来源&#xff1a;何小鹏官方微博 需要样件请联&#xff1…

Oracle DMP文件导入

dmp文件可以在Navicat中的 把dmp放入其中。然后用数据泵导入。遗憾的是报错 [ERR] ORA-39001: invalid argument value [ERR] ORA-39000: bad dump file specification [ERR] ORA-39143: dump file "/xxx.DMP" may be an original export dump file 改为imp工具&…

干货分享 | TSMaster标定模块自动化控制应用指南

本文目录&#xff1a; 一、TSMaster标定模块自动化控制的基础原理 1.1 TSMaster的标定系统变量 1.2 内部TSMaster调用C脚本实现标定模块的自动化控制 1.3 外部调用COM组件实现自动化标定 二、标定自动化控制场景与TSMaster实例 2.1 C脚本实现控制标定模块的启动与关闭的设…

Goby 漏洞发布|网神SecGate 3600防火墙 sys_export_conf_local_save 文件读取漏洞

漏洞名称&#xff1a;网神SecGate 3600防火墙 sys_export_conf_local_save 文件读取漏洞 English Name&#xff1a;Weaver OA PluginViewServlet Authentication Bypass Vulnerability CVSS core: 8.0 影响资产数&#xff1a;738 漏洞描述&#xff1a; 网神SecGate 3600防…

同一 tomcat 不同项目 session 共享实现

说明 这里仅讨论 同一个tomcat&#xff0c;部署了两个工程&#xff08;两个war包&#xff09;。不涉及不同tomcat,不涉及集群 背景 tomcat中的工程A包含用户登录、退出、权限控制等功能&#xff1b;工程B包含业务功能接口。工程A将用户登录信息加密响应给前端&#xff0c;前…

基于Java校园快递代取系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…

NLP(五十五)LangChain入门

LangChain简介 背景 由于ChatGPT的发行&#xff0c;大模型&#xff08;Large Language Model, LLM&#xff09;已经变得非常流行了。也许你可能没有足够的资金和计算资源从头开始训练大模型&#xff0c;但你仍然可以使用大模型来做一些比较酷的事情&#xff0c;比如&#xff1…

大数据开发薪资怎么样

想必想入行的小伙伴在正式开始学习之前&#xff0c;都会考虑薪资这个可观因素。有不少小伙伴是看中了大数据的薪资选择加入这个行业的&#xff0c;想知道以后能找什么工作以及工作薪水&#xff0c;那不妨让我们以数据的方式来展示一下~ 猎聘大数据研究院发布了《2022未来人才就…

制造执行系统(MES)的核心功能是什么?

制造执行系统&#xff08;MES&#xff09;的核心功能是什么? 01 什么是MES 制造执行系统&#xff08;MES&#xff09;是一种用于监控、控制和优化制造过程的软件系统。它通过与企业资源计划&#xff08;ERP&#xff09;系统和自动化系统的集成&#xff0c;实现对生产过程的管…

小红书品牌营销策略分析!品牌方必看

小红书在品牌营销方面的策略非常成功&#xff0c;特别是在口碑营销、内容营销和小红书素人达人种草营销方面的运用。以下是伯乐网络传媒对这些策略的详细分析&#xff0c;想要做小红书营销推广的商家必看&#xff01; 一、口碑营销 对于小红书APP来说,口碑营销的传播主体就是小…

Android build.gradle文件

一、ABI&#xff08;Application Binary Interface&#xff09;应用程序二进制接口 其实ABI可以不设置&#xff0c;这样编译时&#xff0c;就会将项目里所有依赖资源包里的so库都打到最终的apk里。 但是&#xff0c;ABI支持多的话&#xff0c;apk也会大&#xff0c;所以一般只支…

MySQL数据库——存储引擎

MySQL数据库——存储引擎 一、MySQL存储引擎1.存储引擎的概念2.常用存储引擎3.存储引擎的分类4.企业选择存储引擎依据 二、MyISAM 存储引擎1 MyISAM的相关了解2 MyISAM的特点3 MyISAM表支持3种不同的存储格式4.MyISAM适用的生产场景 三、InnoDB 存储引擎1 InnoDB的相关了解2 In…

探索NDK和逆向工程在Android开发中的力量

NDK是什么&#xff1f; NDK&#xff08;Native Development Kit&#xff09;是一组工具集&#xff0c;用于在Android平台上开发和构建使用C或其他本地语言编写的应用程序。NDK提供了一些库和工具&#xff0c;使开发人员能够在应用中使用本地代码&#xff0c;并实现与Java代码的…

ant+svn项目打包部署错误记录

安装ant可以参考下这个 http://t.csdn.cn/kx1ZX 第一个错误&#xff0c;原因是缺少ant-contrib.jar导致&#xff0c;将对应jar包放入ant的lib下即可 [taskdef] Could not load definitions from resource net/sf/antcontrib/antcontrib.properties. It could not be found. B…

低/无代码平台:公民开发和公民自动化,让人人成为软件开发者

在企业数字化转型领域&#xff0c;公民自动化是一个备受关注的概念。虽然这个词汇可能有些“陌生又熟悉”&#xff0c;但在公民开发运动中已经引起了不小的轰动。那么&#xff0c;什么是公民自动化&#xff1f;它与公民开发之间又有哪些不同&#xff1f; 公民开发是什么&#x…