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

  • 营业税金及附加怎么计提
  • 未交增值税借方表示什么
  • 粗纤维测定仪使用方法
  • 已报关的货物可以改单价价吗
  • 人力资源公司代招的岗位可以去吗
  • 冲红重开发票增值税怎么处理
  • 对赌协议补偿款计入哪个科目
  • 奖金做预发年底结算缴税怎么做?
  • 收到增值税专用发票是已经付款了吗
  • 利息算增值税吗
  • 出口货物免抵退税额城市维护建设税
  • 没有发票怎么报销入账
  • 个人拿身份证可以贷款吗
  • 财税2010 121号文件是否作废
  • 普票冲红需要收回全部联次吗
  • 交防伪税控技术怎么交
  • 一次性发放几个月的工资怎么申报
  • 损益表和利润表的关系
  • 支票收款
  • 劳务费开发票还要代扣代缴吗?
  • 二手车抵押银行贷款
  • 营改增后的税率
  • 公司邀请外国人来华邀请函模板
  • 土地使用税计税依据及计算方式
  • 业务招待费如何进行纳税调整
  • 融资租赁不动产税务处理
  • 资产负债表期初和期末指的是什么
  • 在win7系统中,添加打印机驱动程序
  • QQPCTray.exe是什么进程 QQPCTray.exe文件介绍
  • 库存现金盘亏盘盈的原因
  • 在海里的章鱼
  • 蒙特利尔 攻略
  • 如何计提加计抵减额分录
  • 社会保险个人部分计入什么科目
  • php ioc
  • vue无线滚动
  • 全连接神经网络是什么意思
  • 增值税折扣发票有折扣字样
  • 只有销售才能使你成功的名言
  • 人力资源企业税收风险
  • 公司购买家电开什么发票
  • 企业纳税人识别号是什么
  • 网上税则
  • 所有者权益期末余额-年初余额=净利润吗?
  • 出资比例不等于100%
  • 客户要发票加收怎么办
  • python 概率分布函数
  • 环保税的纳税义务人是施工方还是建设方安徽
  • 购入原材料要交印花税吗
  • 公司为员工报销怎么做账
  • 生产企业成本核算案例
  • 进项抵扣和销项抵扣
  • 房租进项发票怎么处理
  • 公司注销后退资需要交税吗
  • 还银行贷款如何计算利息
  • 中小企业的资产负债率均值是多少
  • 搬迁所得
  • 购置固定资产支出怎么算
  • 小规模纳税人季度不超30万怎么做账
  • 本年利润是负数怎么写凭证
  • 企业所得税季度交还要年交吗
  • 什么时候用税前项目举例说明工程项目
  • 新手学会计怎么学
  • mysql增删改查实例
  • win8 联网
  • xbox无法连接无线网络
  • centos lftp
  • win7如何设置共享
  • win10安装不了ie
  • window10光驱不能用了
  • 网络传输协议是事实上的国际标准
  • data命令
  • jQuery实现textarea自动增长宽高的方法
  • python语言怎么用
  • unity中ngui
  • 房子总额70万首付多少
  • 黄金税率是多少
  • 沧州地税局领导班子
  • 密云到顺义区医院公交路线
  • 税务局经费来源
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设