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

  • 失控发票账务处理
  • 不征税收入有哪些类型
  • 积分换物品是真的吗
  • 购买税控盘分录怎么做
  • 收款和出库哪个借方哪个贷方?
  • 零星小额交易要交税吗
  • 外购的商誉如何做账
  • 增值税逾期未申报的税务怎么处理
  • 转账支票支付购货款填制什么凭证
  • 库存商品对外销售会计分录
  • 冲减存货的会计分录
  • 已经入库的商品出库了要怎么做会计分录
  • 营业账簿印花税包括什么
  • 个人开劳务专票给公司怎么开
  • 大众创业的后果
  • 调整薪酬结构
  • 一般纳税人能用小企业会计准则吗
  • 坏账准备金最新计算公式
  • 异地本行转账
  • 项目地预交企业所得税分录如何处理?
  • windows安全警报关不掉
  • win11安装失败0xc1900201
  • windows 10 版本 21h1
  • 有哪些分享方式
  • macos big sur使用
  • php字符串型数据的定义方式
  • php数组函数题目
  • 附有退回条件的销售商
  • 服装制造业现状和发展趋势
  • PHP:checkdate()的用法_Date Time函数
  • 企业所得税汇算表
  • 宝塔面板安装zabbix
  • 合规检查中检查不了的设备
  • 补充养老保险税前扣除标准与扣除比例
  • 报销差旅费的会计分录为什么是其他应收款
  • ROS2+cartographer+激光雷达+IMU里程计数据融合(robot_locazation) 建图
  • 提交表单后重定向
  • php ajax请求
  • vue中利用ref实现更灵活的子向父传值
  • 解压包的命令
  • php下载文件到指定目录
  • 用盈余公积弥补亏损会影响所有者权益吗
  • 发票失控进项转出
  • 税款返还 分录
  • 增值税发票退回重开期限
  • 小规模纳税人增值税超过30万怎么纳税
  • 应收账款扣款会计处理
  • 织梦cms可以商用吗
  • 一次性计入当期成本费用是什么意思
  • 减免增值税计入营业外收入明细科目
  • 发票可否盖财务章
  • 消费税也是流转税吗
  • 存货盘盈的账务处理入什么费用
  • 房地产行业增值税预缴
  • 免增增值税的有
  • 对公账户可以转让吗
  • 网上购物退款后未退回物品怎么投诉
  • 小规模纳税人企业所得税税率
  • 计提应付职工薪酬在借方还是贷方
  • java连接sqlserver数据库对象名无效
  • windows8正版
  • linux里top
  • linux日常使用
  • win10系统打开ie浏览器变百度怎么改回ie浏览器了
  • Win10预览版怎么变回正式版
  • 物联网1.0 2.0 3.0
  • windows8咋关机
  • windows8音频服务尚未启用 怎么解决
  • js获取页面元素的方法
  • 如何给图像应用css滤镜处理效果
  • Unity3D游戏开发(第2版)
  • unityplayer安卓
  • unity基础教程
  • linux链接ln
  • 信用社股金分红时间
  • 税务人的形象
  • 税务局冬季作息时间
  • 飞机票其他税费包括什么内容
  • 安徽省国家税务局网上办税平台
  • 国地税怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设