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

  • 购买方收取的违约金怎么入账
  • 弥补亏损用税前还是税前
  • 商品批发企业进项税额会计分录
  • 境内单位和个人向境外单位提供服务
  • 什么叫差额征税呢
  • 餐饮娱乐服务费进项税不能从销项税额抵扣
  • 出口货物的报关时限为装货的24小时以前
  • 企业从银行借款归还应付账款
  • 合伙企业每年费用
  • 残保金申报表中的上年工资总额指所属期的上一年吗
  • 会计差错更正流程
  • 手工账写错字怎么改呢
  • 累计折旧计入资产负债表什么科目
  • 低值易耗品摊销借贷方向
  • 注册资本金印花税什么时候缴纳
  • 差错更正要调去年的吗
  • 非独立核算的分公司是什么意思
  • 2018工资个税税率表
  • 半成品牛排有营养吗
  • 物流企业的大宗商品仓储用地是什么意思
  • 增值税普通发票需要交税吗
  • 毛利润和纯利润的计算公式
  • 进口税退税
  • 办公用品收据可以入账吗
  • 应付工资和实付工资的差额叫什么
  • 已经认证抵扣的发票会计分录
  • 亏损的结转分录
  • 前两个月亏损第三个月盈利所得税怎么计算
  • 行政单位房租收入上交分录
  • 丢失空白发票怎么处罚
  • 自产自销的茶叶要交增值税吗
  • realjbox.exe - realjbox是什么进程 作用是什么
  • 发票明细与实际不符是什么行为
  • 贷款逾期的本金利息
  • php 二叉树的遍历
  • 国家纪念品
  • php处理并发有哪些技术
  • phpcms文档
  • phpcms开发招聘
  • 利息收入怎么做账务处理
  • 绿化公司属于哪个行业
  • 发生售后维修领用材料分录
  • 织梦停止更新了吗
  • 企业的业务招待费属于什么费用
  • 合同不交印花税怎么处理
  • 债务豁免会计核算
  • mysql几千万条数据
  • MySQL数据库远程登录
  • 合并会计报表合并范围
  • 用友t6操作流程
  • 同一控制和非同一控制的区别图解
  • 工资走公账有什么好处
  • 尚未使用或出租而待售的商品房需要交房产税吗
  • 住房基金可以取出来用吗
  • 中小微企业优惠政策
  • 房地产预缴税款主表怎么填
  • 房地产开发企业资质管理规定
  • 电子发票是否使用
  • 应纳税工资是应发还是实发
  • 营改增后计税依据
  • sql数据库连不上可能的原因
  • esxi6.7克隆
  • win8系统怎么远程电脑
  • windows开机显示正在清理
  • winxp系统修复 不重装软件
  • win7如何打开windows功能
  • win10电脑磁盘损坏
  • unity项目资源
  • vim按键
  • opengl语言
  • easyui combotree加载静态数据问题(选不上)解决方法
  • [置顶]游戏名:chivalry2
  • android解析
  • [置顶]马粥街残酷史
  • unity引擎叫什么
  • python的for函数
  • 湖北耕地占用税标准
  • 小规模纳税人一年开票额度是多少
  • 河北地税网上申报纳税
  • 工商注册app是不是在手机上可以完全操作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设