首页 > 其他分享 >解决使用vue-awesome-swiper,loop设置为true点击失效问题

解决使用vue-awesome-swiper,loop设置为true点击失效问题

时间:2024-06-20 11:10:52浏览次数:20  
标签:vue awesome height padding width deviceDetail 100% swiper

<template>
  <div
    class="app-container"
    :class="[pageMode === 'pageMode2560' ? 'pageMode2560' : '']"
  >
    <div class="tag—title">
      物联感知
    </div>
    <div class="swiper-detail" @click="detailClick">
      <img
        class="detail-img"
        :src="
          `https://zhld.wlcszhld.com:8443/qjzh-fs/preview/permanent/iot/icon/${deviceDetail.iconClass}_detail.png`
        "
      />
      <div class="detail-content">
        <div class="content-item-2">
          <span class="label">设备名称:</span>
          <span class="value">{{ deviceDetail.productGroupName }}</span>
        </div>
        <div class="content-item-2">
          <span class="label">设备数量:</span>
          <span class="value">{{ deviceDetail.totalNum + 100 }}个</span>
        </div>
      </div>
    </div>
    <div class="swiper-box">
      <swiper
        v-if="deviceList.length > 0"
        ref="mySwiper"
        :options="swiperOptions"
      >
        <swiper-slide v-for="(item, index) in deviceList" :key="index">
          <img
            class="swiper-img"
            :src="
              `https://zhld.wlcszhld.com:8443/qjzh-fs/preview/permanent/iot/icon/${item.iconClass}_pressed.svg`
            "
            @click="clickImg(item)"
          />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { getPerceptionDevice } from '@/api/cockpit';

export default {
  name: 'PerceptionDevice',
  props: {
    pageMode: {
      type: String,
      default: 'pageMode3480'
    }
  },
  data() {
    const that = this;
    return {
      imgIndex: 0,
      deviceList: [],
      deviceDetail: {
        productGroupCode: '',
        productGroupName: '',
        totalNum: 0,
        iconClass: 'map_AI'
      },
      swiperOptions: {
        slidesPerView: 5,

        autoplay: {
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        delay: 1000,
        loop: true,

        spaceBetween: 15, // 间隔30
        on: {
          slideChangeTransitionStart() {
            that.imgIndex = this.realIndex;
          }
        }
      }
    };
  },
  watch: {
    imgIndex(newVal) {
      this.deviceDetail = this.deviceList[newVal];
    }
  },
  mounted() {
    this.queryDeviceList();
  },
  methods: {
    detailClick() {
      this.$emit('deviceClick', this.deviceDetail.productGroupCode);
    },
    clickImg(item) {
      this.deviceDetail = item;
    },
    async queryDeviceList() {
      const form = new FormData();
      form.append('token', this.$store.getters.token);
      getPerceptionDevice(form).then(ret => {
        const res = ret.data.body;
        this.deviceList = res;
        this.deviceDetail = res[0];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0px 14px;
  .tag—title {
    width: 100%;
    height: 47px;
    font-size: 20px;
    color: #1af1e9;
    line-height: 47px;
    background: url('~@/assets/images/bigScreen/top-figure2.png') no-repeat;
    background-size: 100% 100%;
  }
  &.pageMode2560 {
    padding: 0 60px 0 55px;
    .tag—title {
      height: 34px;
      padding-left: 38px;
      line-height: 34px;
      text-align: left;
      color: #fff;
      background: url('~@/assets/images/bigScreen/title-bg2560.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-detail {
    width: 100%;
    height: 150px;
    display: flex;
    padding: 10px 20px;
    margin-bottom: 20px;
    cursor: pointer;
    .detail-img {
      width: 240px;
      height: 140px;
      border: 1px solid #fff;
    }
    .detail-content {
      height: 150px;
      padding: 24px 0 0 10px;
      .content-item-2 {
        line-height: 40px;
        margin-bottom: 10px;
        font-size: 22px;
        .label {
          margin-right: 10px;
          color: #faf889;
        }
        .value {
          color: #16fdfe;
        }
      }
    }
  }
  .swiper-box {
    width: 100%;
    height: 80px;
    .swiper-container {
      width: 500px;
      height: 70px;
      .swiper-slide {
        width: 100%;
        height: 100%;
      }
      .swiper-img {
        width: 98%;
        height: 100%;
        object-fit: fill;
        border: 1px solid #fff;
        cursor: pointer;
      }
    }
  }
}
</style>

 

标签:vue,awesome,height,padding,width,deviceDetail,100%,swiper
From: https://www.cnblogs.com/guwufeiyang/p/18258279

相关文章

  • Java项目-基于SpringCloud+springboot+vue的分布式架构网上商城系统(源码+数据库+文档
    源码获取:https://download.csdn.net/download/u011832806/89440647基于SpringCloud+SpringBoot+Vue的分布式架构网上商城系统   开发语言:Java   数据库:MySQL   技术:SpringCloud+SpringBoot+MyBatis+Vue.js+eureka   工具:IDEA/Ecilpse、Navicat、Maven经......
  • Java项目-基于ssm+vue的大学生兼职跟踪系统(源码+数据库+文档)​
    如需完整项目,请私信博主基于ssm+Vue的大学生兼职跟踪系统开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven本文以Java为开发技术,实现了一个大学生兼职跟踪系统。大学生兼职跟踪系统的主要实现功能包括:管理员:首页、个人中心、商......
  • Java项目-基于springboot+vue的学习平台(源码+数据库+文档)​
    源码获取:https://download.csdn.net/download/u011832806/89456223基于SpringBoot+Vue的学习平台开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括学习平台......
  • vue(vue.js) 监视属性与深度监视
    原文链接:vue(vue.js)监视属性与深度监视–每天进步一点点(longkui.site) 1.监视属性监视属性:监视某个属性的变化小案例:<!DOCTYPEhtml><htmllang="en"><body> <divid="root"><h2>今天天气很{{hot?'热':'冷'}}</h2&g......
  • Vue3 状态管理 - Pinia,超详细讲解!
    前言:哈喽,大家好,我是前端菜鸟的自我修养!今天给大家分享【Vue3状态管理-Pinia】,超详细讲解!并提供具体代码帮助大家深入理解,彻底掌握!原创不易,如果能帮助到带大家,欢迎收藏+关注哦......
  • 基于Java+Vue前后端分离在线考试系统(源码+LW+PPT+部署教程)
    博主介绍:✌全网粉丝10W+平台特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于毕业项目实战✌一、作品包含源码+数据库+设计文档LW+PPT+全套环境和工具资源+部署教程二、项目技术前端技术:Ht......
  • vue3的computed计算属性返回值注解
    //语法结构:computed<返回值的类型>()列子//定义数据constcuont=ref(0)typeItem={id:stringname:stringprice:number}constlist=ref<Item[]>([{id:'1001',name:'男鞋',price:888},{id:'1002',name:'女鞋......
  • vue3的defineProps接收类型注解
    //这是没有用ts语法接收的props参数defineProps({color:String,size:{type:String,required:false,default:'middle'},})//TS语法//格式:withDefaults(defineProps<类型>(),{默认值名:默认值})第一种写法:withDefa......
  • 基于SpringBoot+Vue+uniapp的社区门诊管理系统的详细设计和实现(源码+lw+部署文档+讲
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于SpringBoot+Vue+uniapp的校园二手交易平台的详细设计和实现(源码+lw+部署文档+讲
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......