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

  • 空调定时怎么取消(空调定时怎么取消海尔)

    空调定时怎么取消(空调定时怎么取消海尔)

  • 微信视频号买的东西在哪里看订单(微信视频号买的订单在哪看)

    微信视频号买的东西在哪里看订单(微信视频号买的订单在哪看)

  • vivox70pro怎么显示流量(vivo手机怎么显示)

    vivox70pro怎么显示流量(vivo手机怎么显示)

  • 华为闹钟铃声怎么设置(华为闹钟铃声怎么调)

    华为闹钟铃声怎么设置(华为闹钟铃声怎么调)

  • 手机储存异常,请删除账号重试(手机储存异常怎么办)

    手机储存异常,请删除账号重试(手机储存异常怎么办)

  • 为什么不要打开旁白

    为什么不要打开旁白

  • 麒麟820相当于骁龙多少的处理器,两者差距大吗?(麒麟820相当于骁龙695哪个好)

    麒麟820相当于骁龙多少的处理器,两者差距大吗?(麒麟820相当于骁龙695哪个好)

  • 做短视频需要什么设备(做短视频需要什么软件)

    做短视频需要什么设备(做短视频需要什么软件)

  • 苹果13.3寸笔记本尺寸大小(苹果13.3寸笔记本电脑怎么样?)

    苹果13.3寸笔记本尺寸大小(苹果13.3寸笔记本电脑怎么样?)

  • 台式机有自带摄像头吗(台式机自带摄像头和麦克风吗)

    台式机有自带摄像头吗(台式机自带摄像头和麦克风吗)

  • 抖音小店可以挂几个账号(抖音小店可以挂别人的链接吗)

    抖音小店可以挂几个账号(抖音小店可以挂别人的链接吗)

  • 苹果11pro基带是高通还是英特尔(iphone11pro的基带)

    苹果11pro基带是高通还是英特尔(iphone11pro的基带)

  • 华为mate30pro支持airpods吗(华为mate30pro支持wifi6吗)

    华为mate30pro支持airpods吗(华为mate30pro支持wifi6吗)

  • psplay是什么意思(psplay官网)

    psplay是什么意思(psplay官网)

  • mg4j2ch a是什么版本(mg4h2ll/a是什么版本)

    mg4j2ch a是什么版本(mg4h2ll/a是什么版本)

  • 手机里zip压缩包是什么(手机里zip压缩包在哪里)

    手机里zip压缩包是什么(手机里zip压缩包在哪里)

  • 手机怎么打开bz2(手机怎么打开rar文件)

    手机怎么打开bz2(手机怎么打开rar文件)

  • 快手上黄钻是什么(快手上黄钻是什么意思)

    快手上黄钻是什么(快手上黄钻是什么意思)

  • 苹果11要更新13.1吗(苹果11要更新15.1吗)

    苹果11要更新13.1吗(苹果11要更新15.1吗)

  • stk一al00是什么型号(stk-al00什么型号手机)

    stk一al00是什么型号(stk-al00什么型号手机)

  • 小米cc9怎么清运行(小米cc9e怎么卸载自带软件)

    小米cc9怎么清运行(小米cc9e怎么卸载自带软件)

  • 苹果自拍镜像怎么设置(苹果自拍镜像怎么设置6s)

    苹果自拍镜像怎么设置(苹果自拍镜像怎么设置6s)

  • 全民k歌怎么向人约歌(全民k歌怎样k歌)

    全民k歌怎么向人约歌(全民k歌怎样k歌)

  • 台式电脑怎么连接电视(台式电脑怎么连接网络)

    台式电脑怎么连接电视(台式电脑怎么连接网络)

  • bigfix.exe是什么文件的进程 bigfix进程安全吗(bigfile是什么意思)

    bigfix.exe是什么文件的进程 bigfix进程安全吗(bigfile是什么意思)

  • [error] Error: Fail to open IDE 问题解决

    [error] Error: Fail to open IDE 问题解决

  • b站B导的yoloV7版本添加注意力机制(b站导出预设)

    b站B导的yoloV7版本添加注意力机制(b站导出预设)

  • 调整增值税误差的方法
  • 增量留抵税额怎么做分录
  • 软件使用权收入怎么计算
  • 报验户预缴个税怎么算
  • 年利润100万要交多少企业所得税
  • 开票软件找不到已开发票
  • 未交增值税借方余额表示什么意思
  • 机动船舶缴纳车船税吗
  • 私营公司会计资取公司资金
  • 个税专项附加扣除是每个月扣还是按年计算
  • 每股收益无差别点公式
  • 主营业务成本计算公式是什么
  • 第三方用人单位应承担哪些责任
  • 无形资产内部研究开发支出的确认和计量
  • 小规模纳税人如何转一般纳税人
  • 小规模纳税人超过500万可以不转一般纳税人吗
  • 税费种认定功能在哪里
  • 生产企业研发用原料抵进项可以吗?
  • 建筑业商业保险受益人可以是公司吗
  • 二手房房产税如何征收
  • 印花税按次申报怎么报
  • 不能抵扣的福利发票要勾选吗为什么
  • 委托加工物资手续费
  • 增值税普通发票几个点
  • 专用发票的开票人收款人复核人都要开齐吗
  • 装载u盘
  • 高新企业研发费用比例
  • 预缴企业所得税怎么做账务处理
  • 研发新产品的重要性
  • 可视化思考
  • 本期收入及免税收入怎么填
  • python调用cuda执行加法
  • 前端工程化解决方案
  • 购买超市购物卡会计分录
  • 固定资产处置科目有哪些
  • 残疾人保障金计入哪个会计科目
  • 如何顺利完成年度任务
  • python numpy 删除元素
  • 销售公司提成表模板
  • 所得税费用期末结转吗
  • mongodb查询操作
  • 新会计准则有哪三个
  • 坏账准备怎么结转到本年利润
  • 增值税抵扣了,主要成本怎么算
  • 给保安买大衣算贿赂吗
  • 接受投资的固定资产按什么入账
  • 软件企业的研发费用占比
  • 加计扣除所得税怎么算
  • 已认证抵扣的发票如何做账
  • 简易计税通过哪个科目核算
  • 增值税计入固定资产的成本吗
  • 关于投资收益纳税的说法
  • 收到劳务公司代发工资怎么做账
  • 总包分包怎么区分
  • 挂其他应付款的帐怎么冲平
  • 销售回款率怎么计算,麻烦知道的告诉我,11
  • 融资租赁本金和租金的区别
  • 培训费开增值税专用发票可以抵扣吗
  • 年底结账会计处理
  • mysql中字符串函数
  • mysql从一个表导入记录到另一个表
  • 如何设置微信语音来电铃声
  • cool file viewer pro是什么软件
  • asm是啥
  • 重装Windows11
  • linux 安装jmap
  • Win7电脑自动关机是什么原因
  • win7如何设置屏幕不黑屏
  • 怎么让微软账户获得所有权限
  • win7开机zyufs7
  • win8的开始
  • 每次开机windows桌面更新
  • jquery鼠标点击事件怎么写
  • js function函数
  • 杭州二套房契税新政策2023年
  • 美国消费比例
  • 税务文书送达回证模板
  • 江苏发票真伪查询网站
  • 外经证开错了怎么办
  • 跪式服务礼仪规范图片
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设