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

  • 一般纳税人开普票税率是3%还是13%
  • 个体经营所得税核定征收2023标准
  • 餐饮娱乐服务费进项税不能从销项税额抵扣
  • 账面价值与计税基础之间没有差别只是计价的两种名称
  • 小规模教育培训计划
  • 软件产品增值税超税负即征即退
  • 广告发布费在哪个分类
  • 补缴所得税的账务处理
  • 个体户一直零申报会不会罚款
  • 企业想成为退税商店需具备哪些条件
  • 财务报表中的负债是什么意思
  • 赠品的会计核算内容
  • 增值税发票抵扣多少个点
  • 营改增对电信业的影响及对策
  • 应收账款因质量不符合退货应该实施什么审计程序
  • 收回员工社保入什么科目
  • 退交税钱
  • 进口增值税未抵扣怎么办
  • 专票已经抵扣购买方如何处理
  • 怎么查找地方教育附加税的计税依据?
  • 专用发票的有效期是几年
  • 销售设备并安装
  • 公司自用房屋怎样交税
  • 防伪税控减免税款的会计分录
  • 增值税暂行条例属于
  • 餐饮研发费用确认条件
  • 小规模企业所得税按季度还是按年
  • 劳务工程款和工人工资的区别
  • 幼儿园开发成本
  • 内账增值税会计核算
  • .exe文件病毒
  • 研发支出怎么做账
  • 网速怎么限制10mb以内
  • 劳务外包开什么样的发票
  • 在XP中,为什么"网络连接"图标消失?
  • windows商店如何切换地区
  • 用盈余公积弥补以前年度亏损
  • bert multihead
  • thinkphp6调用模型的方法
  • 物流公司挂靠会计处理
  • 高新企业研发项目是否需要立项审批?
  • 公司的财务报表能看出什么
  • 开增值税发票需要和收款账户名字一致吗
  • 土地使用税和房产税怎么申报
  • 软件服务费可以全额抵扣吗?
  • 未达起征点的增值税会计处理
  • 金税盘抵扣税款分录怎么做
  • 个人所得税的不同税率
  • 赠送代金券活动方案
  • 进口卷烟消费税定额税率
  • 小规模企业缴纳公积金怎么做账
  • 收到商业汇票计什么科目
  • 退回现金会计分录
  • 购买材料发生商损怎么算
  • 永续债举例
  • 旅客运送的一般规定
  • 企业买车购置税可以抵增值税吗
  • 收到红字发票怎么做账怎么做进项税额转出
  • 公司经营范围怎么填
  • 怎样计算加班工资?
  • sqlserver批处理语句
  • 关于植物的现代诗
  • 苹果发布会最新消息
  • dos命令环境
  • iis w3svc
  • win8系统一直重启
  • linux临时修改编码
  • win10d盘无法格式化,说另一个正在使用
  • 每日十条简短新闻
  • node 获取当前时间
  • WebSocket+node.js创建即时通信的Web聊天服务器
  • 批处理设置ip地址配置的dns
  • android开发基础知识
  • js右键菜单
  • Node.js+Express+MySql实现用户登录注册功能
  • Android网络通讯哪个最简单
  • 个人可以到税务开物业费的
  • 给个人佣金怎么避税
  • 河北省税金费率
  • 云开票怎么报税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设