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

  • 股东入股的标准
  • 季度的工会经费计税依据
  • 个税返还手续费奖励员工需要交个税吗
  • 停业的纳税人还交税吗
  • 上月未计提税金,下月怎么做分录
  • 上月暂估计提的费用次月来发票怎么写会计分录?
  • 事业单位现金收支管理办法
  • 财政补贴是什么
  • 多出来的费用
  • 支付税点怎么做账
  • 对外支付佣金代扣代缴
  • 预收账款缴纳企税怎么算
  • 货运代理可以开9个点的发票吗?
  • 地税印花税税率是多少
  • 小规模纳税季度申报
  • 实务操作中的税会差异有哪些?
  • 税友软件费用
  • 分公司注销总公司会计分录
  • 开出销项负数发票怎么做账
  • 企业在外地的房产怎么办
  • 发票联和抵扣联丢失怎么办
  • 股权转让要交哪些费用
  • 餐饮业会计做账技巧
  • 如何删除驱动器里面的文件
  • php 递归函数
  • u启动u盘怎么装系统
  • windows怎么复制
  • php fgets
  • php ssl
  • 福利企业增值税即征即退会计处理
  • 工地临时设施搭设原则是什么?
  • 营改增通俗
  • 出口退税的账怎么做
  • 非盈利组织固定资产没入帐 怎么调账
  • 客户多付款入哪个科目
  • 个人咨询服务费怎么交税
  • anaconda3.5.2安装教程
  • php的基本知识
  • 日常公用经费包括资本性支出吗
  • 公司5个印章都刻错了
  • 预算单位往来资金增加申报表代办人签字有风险吗?
  • phpcms 用的是什么模板引擎
  • mysql数据库死锁产生的原因及解决方案
  • 企业应纳税所得额的计算应遵循权责发生制原则
  • 没有收入该怎么办
  • 高铁票进项抵扣计算错了 怎么办理
  • 不动产进项税抵扣规定一次性抵扣
  • 服务费的增值税可以抵扣吗
  • 企业进项是什么意思
  • 管理费用是怎么计算的
  • 应收账款周转速度快表明
  • 企业所得税汇算清缴时间
  • 取报销凭证的步骤
  • 库存现金主要账目有哪些
  • 股权转让的印花税税率是多少
  • 数字证书如何申报社保
  • 建筑安装企业外雇施工人员劳务费用什么做支付凭证
  • 普票丢失可以用复印件入账吗
  • 员工报销材料费用会计分录
  • 公司申请土地建厂房
  • 企业差旅费的报销流程
  • 公司电子发票报销
  • freebsd版本选择
  • win7电脑磁盘空间不足清理步骤
  • Win7系统打印机共享无法保存打印机设置0x000006d9
  • 问题少年特训学校
  • jq读取json
  • 利用的近义词
  • 简单谈谈对电信的认识
  • 用jquery制作网页
  • unity find references in scene
  • android StrictMode使用
  • python简单实现刷新智联简历
  • 计提税金的公式
  • 美国海关税收起征点
  • 外贸公司如何开发客户
  • 百旺税控客服电话
  • 出口退税的企业货币要回国内吗
  • 单位纳税人什么意思
  • 差额开票扣除额多补税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设