位置: 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项目打包后还能修改吗)

  • 商业保险进项税额转出影响成本吗
  • 税务稽查最坏结果不知情人员怎么办
  • 固定资产处置收入怎么报税
  • 其他综合收益影响递延所得税负债吗
  • 公司没有收入怎么报销
  • 赞助费账务处理
  • 已核销的坏账又收回会计分录
  • 小规模纳税人一个季度多少免税
  • 电商刷单的成本如何处理?
  • 员工奖金分两次发怎么交税?
  • 记账时显示期初未建账
  • 修理厂专票怎么开
  • 增值税进项税额是什么意思
  • 总分机构账务处理
  • 企业承担社保
  • 投资收益科目应用
  • 会计核算中利润包括哪些
  • 如何增加发票数量和额度
  • 税收分类编码选错会怎样
  • 七彩虹主板 wol
  • 支付店面租金为什么是管理费用
  • php中cookie的值存储在哪
  • win11电脑怎么设置开机密码
  • 销售固定资产税目
  • 点云目标检测数据集
  • Yii使用技巧大汇总
  • 工业企业缴纳的税费种类包括
  • 培训费收入交什么税
  • 房产税城镇土地使用税申报期限
  • php操作cookie
  • 投资性房地产如何计提折旧
  • 调整以前年度少计提的工资
  • 以前年度损益在报表哪里体现
  • 一个楼盘可以开盘几次
  • vit详解
  • 基建项目招标流程
  • typescript完全解读
  • 其他权益工具投资公允价值变动怎么计算
  • 销售旧货怎么填写申报表
  • 补税分录
  • mysql数据库基本操作
  • 母公司给我们减工资
  • 研发费用资本化条件有哪些
  • 出口销售收入计算公式
  • 教育行业税收优势分析
  • 发票金额跟实际转账金额不一样该怎么办
  • 研发支出资本化计入什么科目
  • 差额征税的账务处理教学视频
  • 收到国外客户的货款怎么做账
  • 用友怎么取消月结
  • 股权转让对价款如何计算
  • 汇算清缴补税的凭证后面需要附件吗
  • 员工迟到扣款如何做账
  • 收到客户预付款会计分录
  • 辅助生产车间的制造费用不通过制造费用核算
  • 促销有哪几个方面
  • 加油预付卡发票新规定文件
  • 小规模季报成功后怎么缴费
  • 企业应交税金包括印花税吗
  • 暂估的费用次年调增怎么做会计分录
  • 余额调节表怎么填写例题
  • 目前用到的两个字符
  • sqlserver 中ntext字段的批量替换(updatetext的用法)
  • vista升级选项灰色
  • windows server 2008 r2激活密钥
  • 如何激活Win8.1
  • linux环境什么意思
  • msng.exe是什么
  • win7 64位系统玩英雄联盟lol频繁提示failed to create dump file error 183的解决方法
  • windows 8
  • windows2008无法识别usb
  • win7取消关机命令
  • Node.js中Bootstrap-table的两种分页的实现方法
  • jquery的实现原理
  • android基于linux还是unix
  • jquery悬浮显示
  • 代理记账公司自查自纠情况报告范文
  • 河南车船税收费标准2022年
  • 2017企业所得税年度申报表
  • 重庆房产税每年都交还是交一次
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设