位置: IT常识 - 正文

swiper获取当前数组滑动的inex(vue)(swiper.js常用功能)

编辑:rootadmin
swiper获取当前数组滑动的inex(vue)

推荐整理分享swiper获取当前数组滑动的inex(vue)(swiper.js常用功能),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:swiper跳转指定swiper,swiper.slideto,swiper-list,swiper.update,swiper获取当前index,swiper-list,swiper-list,swiper获取当前index,内容如对您有帮助,希望把文章链接给更多的朋友!

最近有一个需求,上方是一个swiper,下方是商品数组,当滑动上方的swiper下方的列表需要跟着一起变化,这时候就需要获取当前滑动的swiper数组的index,再进行相关操作,实现方式如下:

import Swiper from "swiper";

import "swiper/dist/css/swiper.css";

import "swiper/dist/js/swiper.min";

export default {

  data() {

    return {

      merchantsZoneList: [],

      zoneId: "",

      currentSlide: 0,

    };

  },

  created() {

    //调用获取swiper list

    this.getMoaZone();

  },

  methods: {

    dataCarousel(data) {

      //此处需要改变一下this指向,因为此处的this是指向swiper

      let that = this;

      //初始化一个swiper

      this.mySwiper = new Swiper(".swiper-container", {

        //配置项

        loop: true,

        effect: "coverflow",

        spaceBetween: 20,

        grabCursor: true,

        centeredSlides: true,

        slidesPerView: "auto",

        initialSlide: 0,

        observer: true,

        observerParents: true,

        autoplay: 100,

        pagination: {

          el: ".swiper-pagination",

swiper获取当前数组滑动的inex(vue)(swiper.js常用功能)

          clickable: true,

        },

        coverflowEffect: {

          rotate: 0,

          slideShadows: false,

        },

        on: {

          //滑动swiper使用的方法

          transitionEnd: function() {

            //当需要滑动的swiper选项等于当前的swiper选项,就不能调用方法

            if (this.activeIndex == that.currentSlide) {

              console.log("不能调用方法");

            } else {

              //只有相等才调用方法

              that.currentSlide = this.activeIndex;

              //获取当前swiper数组的index,data是从后台获取并传入的数组

              const index = (this.activeIndex + data.length) % data.length;

              //调用获取list方法数组

              that.zoneId = data[index].id;

              that.productList = [];

              that.pageNum = 0;

              that.getProductList();

            }

          },

        },

      });

    },

    async getZoneList() {

      //从获取swiper数组

      let res = await zoneList({});

      //获取swiper list赋值

      this.merchantsZoneList = res.data.ptZoneList;

      //使用异步方法调用swiper初始化并传入

      setTimeout(() => {

        this.dataCarousel(res.data.ptZoneList);

      }, 10);

    },

  },

};

本文链接地址:https://www.jiuchutong.com/zhishi/293131.html 转载请保留说明!

上一篇:CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容

下一篇:vue项目设置打包后的静态文件访问路径(vue项目打包后还能修改吗)

  • 微信免费提现5个方法(微信免费提现5个方法2023)

    微信免费提现5个方法(微信免费提现5个方法2023)

  • win11wifi图标不见了(win11wifi图标不见了怎么办)

    win11wifi图标不见了(win11wifi图标不见了怎么办)

  • 魅族 18 Pro支持内存容量扩展吗(魅族18pro支持红外遥控吗)

    魅族 18 Pro支持内存容量扩展吗(魅族18pro支持红外遥控吗)

  • 抖音什么时间段发作品容易上热门(抖音什么时间段发作品流量大)

    抖音什么时间段发作品容易上热门(抖音什么时间段发作品流量大)

  • 整个订阅号怎么置顶(订阅号怎么搞)

    整个订阅号怎么置顶(订阅号怎么搞)

  • oppo手机美颜怎么开(oppo手机美颜怎么红脸蛋)

    oppo手机美颜怎么开(oppo手机美颜怎么红脸蛋)

  • b站评论发不出去(b站评论发不出去用户等级太低)

    b站评论发不出去(b站评论发不出去用户等级太低)

  • 华为手机有放大功能和望远镜功能吗(华为手机有放大器吗在哪里)

    华为手机有放大功能和望远镜功能吗(华为手机有放大器吗在哪里)

  • 手机淘宝的必备工具在哪里(手机淘宝必备工具安全中心守则与违规)

    手机淘宝的必备工具在哪里(手机淘宝必备工具安全中心守则与违规)

  • 页面加载超时什么意思(页面加载超过()秒,57%的用户会放弃当前浏览)

    页面加载超时什么意思(页面加载超过()秒,57%的用户会放弃当前浏览)

  • a1474是ipad什么尺寸(苹果ipad型号a1474多大尺寸)

    a1474是ipad什么尺寸(苹果ipad型号a1474多大尺寸)

  • 苹果怎么加内存(苹果怎么加内存条)

    苹果怎么加内存(苹果怎么加内存条)

  • 现代微型计算机中采用的电子元器件是(现代微型计算机中所采用的电子器械是)

    现代微型计算机中采用的电子元器件是(现代微型计算机中所采用的电子器械是)

  • 如何进入中国知网免费入口(如何进入中国知网进行文献查阅)

    如何进入中国知网免费入口(如何进入中国知网进行文献查阅)

  • 绿洲号可以注销吗(绿洲账号可以修改吗)

    绿洲号可以注销吗(绿洲账号可以修改吗)

  • 192kbps是什么意思(1024kbps是什么意思)

    192kbps是什么意思(1024kbps是什么意思)

  • 苹果xr怎么改微信铃声(苹果xr怎么改微信提示音)

    苹果xr怎么改微信铃声(苹果xr怎么改微信提示音)

  • vivo手机分辨率怎么看(vivo s16分辨率)

    vivo手机分辨率怎么看(vivo s16分辨率)

  • 万能钥匙里的红包是真的吗?可提现吗?(万能钥匙上的红点怎么回事)

    万能钥匙里的红包是真的吗?可提现吗?(万能钥匙上的红点怎么回事)

  • x27摄像头怎么升降(x27摄像头是升降的吗)

    x27摄像头怎么升降(x27摄像头是升降的吗)

  • word标点符号统一格式(word标点符号统一)

    word标点符号统一格式(word标点符号统一)

  • 如何安装win10和ubuntu14双系统 图文详解win10和ubuntu14双系统安装过程(window10安装教程u盘)

    如何安装win10和ubuntu14双系统 图文详解win10和ubuntu14双系统安装过程(window10安装教程u盘)

  • 笔记本电脑按键关机问题的解决(笔记本电脑按键掉了怎么修)

    笔记本电脑按键关机问题的解决(笔记本电脑按键掉了怎么修)

  • css深度选择器deep(css选择器nth)

    css深度选择器deep(css选择器nth)

  • 企业用于职工的个人住房是否可以不缴纳房产税?
  • 天然气管道抢维修工作总结
  • 税后净利润是什么意思
  • 投资款要不要交企业所得税
  • 哪些进项税额不可以抵扣
  • 预算报表分析报告
  • 出纳人员应该怎么称呼
  • 小规模纳税人和个体工商户的税收政策
  • 房租怎么抵扣个税计算方法
  • 预收款 交税
  • 长期股权投资如何审计
  • 金融企业发放贷款时发生的交易费用
  • 苗木发票抵扣公式
  • 企业所得税连续3年亏损预警自查报告
  • 产品销售员
  • 现汇账户和现钞账户可以转账吗
  • 异地工程缴纳增值税
  • 注册资本没有缴足前贷款利息
  • 财会【2016】22号文
  • 关于增值税专用发票
  • 资产负债表在途物资属于存货吗
  • windows11开始菜单怎么居中
  • win101703怎么看
  • windows10如何关闭左下角的搜索
  • 物流公司的财务能学到东西吗
  • 应付股利的会计科目
  • 贷款损失会计处理
  • image driver
  • 中拍网拍卖
  • 自有物业出租需交税吗
  • 租入固定资产改良支出属于资本性支出吗
  • 注册公司时认缴和实缴时间怎么填
  • 小规模纳税人每月申报什么税
  • 注销报税是什么意思
  • 长期应付款列报为什么是后一年的
  • php array_slice 取出数组中的一段序列实例
  • python怎么求列表里的和
  • 酒店会计科目及账务处理视频
  • 其他收益在利润表填在哪里
  • 酒店收取电费合理吗
  • 在发票上盖了公章有用吗
  • 企业分红所得税
  • 增票普票税率
  • db2导出数据到excel
  • 营改增的不利影响
  • 企业的承兑汇票会计分录
  • 装修室内设计效果图
  • 企业代扣代缴哪些费用
  • 公司股东可以买公司股票吗
  • 营业外收入核算的内容有
  • 工程与会计
  • 总公司和分公司企业所得税分配
  • 没有工会的企业收到返还的工会经费派什么用场
  • 会计准则应收账款计提坏账
  • 个人境外投资限制
  • mysql安装不成功怎么办
  • mysql基本表
  • 将Reporting services的RDL文件拷贝到另外一台机器时报Data at the root level is invalid的解决方法
  • mysql索引基础
  • win10重大更新
  • xp系统设置锁屏
  • 卡巴斯基反病毒软件
  • freebsd 升级
  • linux系统中cp命令
  • ubuntu14.04升级
  • ubuntu中装虚拟机
  • gain_trickler_3202.exe 进程查询 gain_trickler_3202进程是什么文件
  • nerosvc.exe - nerosvc是什么进程 有什么用
  • Android游戏开发入门
  • 深入解析抑郁症:什么是它的表现?别小看它的危害程度!
  • linux常用shell命令
  • unity3d快捷键
  • linux shell命令的返回值
  • javascript delete 使用示例代码
  • 老板思维案例
  • eclipse怎么连接derby数据库
  • 四川省国家税务局电子税务局
  • 广东省国家税务总局班子成员
  • 广西地方税务网站官网
  • 房产营业税满2年怎么算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设