vue-awsome-swiper稳定版本3.1.3及使用方法，API见swiper官网https://www.swiper.com.cn/api/index.html

1.npm和yarn安装/卸载执行命令

// 安装依赖
npm install
yarn install// npm安装/移除插件命令
//页面相关引用都要清除npm install xxx —save
npm uninastall xxx —save// yarn安装/移除插件命令
//页面相关引用都要清除yarn add xxx
yarn remove xxx

2.安装方法：

npm安装

npm install vue-awesome-swiper@3.1.3 --save

yarn安装

yarn add vue-awesome-swiper@3.1.3

3.vue-awsome-swiper引用方式

按照组件形式局部导入：

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {name: 'Index',components: {swiper,swiperSlide},data(){return{}}
}

或者全局导入(大家不推荐，我也不推荐)：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'// require styles
import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)

案列：

<template><div v-loading="loading" class="table-container" element-loading-background="rgba(0, 0, 0, 0)"><div class="table_head"><ul class="table_head--list"><li class="smooth">xxx</li><li class="smooth">xxx</li><li class="smooth">xxx</li><li class="danger">xxx</li><li class="orange">xxx</li><li class="warn">xxx</li><li class="green">xxx</li></ul></div><!-- 滚动--><div class="seamless-warp" @mouseenter="on_top_enter" @mouseleave="on_top_leave"><swiperv-if="listData.length > 1"ref="mySwiper"class="item":options="swiperOption"><swiper-slidev-for="(item,index) in listData":key="index"class="swiperslide"><div class="listdata" @click.stop.prevent="router(item.id)"><span class="title" v-text="$isEmpty(item.profile.realName)?'-':item.profile.realName" /><span class="date" v-text="$isEmpty(item.profile.phone)?'-':item.profile.phone" /><span class="date" v-text="$isEmpty(item.profile.idCard)?'-':item.profile.idCard" /><span class="date" v-text="trainTime(item.labourTrainingPlan, '3')" /><span class="date" v-text="trainTime(item.labourTrainingPlan, '1')" /><span class="date" v-text="trainTime(item.labourTrainingPlan, '2')" /><span class="date" v-text="trainTime(item.labourTrainingPlan, '4')" /></div></swiper-slide></swiper><div v-else class="is-swiper-none titleblue">暂无数据</div></div></div></template><script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { listEmployee, trainCount } from '@/api/qzg'
const vm = this
export default {name: 'Index',components: {swiper,swiperSlide},data() {return {current: 1,timer: undefined,queryParams: {teamId: this.$store.getters.teamId,projectId: this.$store.getters.projectId,contractSectId: undefined},contractId: '',sysId: '',// swiper轮播swiperOption: { // swiper3/* autoplay: { // 自动轮播delay: 3000,disableOnInteraction: false},*//* loop: true,observer: true, // 修改swiper自己或子元素时，自动初始化swiperobserveParents: true, // 修改swiper的父元素时，自动初始化swiperautoplay: {delay: 3000,disableOnInteraction: false // 手动滑动后继续自动播放},direction: 'vertical',slidesPerView : 7,centeredSlides: false,centeredSlidesBounds: false*/},// 数据数组listData: [],loading: false}},computed: {mySwiper() {return this.$refs.mySwiper.swiper},trainTime() {return (value, type) => {const results = value.filter(item => item.trainingType === type)return this.$isNotEmpty(results) ? results[0].trainingTime : '-'}}},created() {this.loading = truethis.$nextTick(() => {this.listSwiper()})this.getOptions()this.timer = setInterval(() => {this.current++this.getOptions()}, 5000)this.loading = true},methods: {router(id) {this.sysId = 'fc68a49a549df12e9a6ab6cb81065f82'this.$store.dispatch('setSystemId', this.sysId).then(() => {window.open(`${process.env.VUE_APP_ADDRESS}labour/employee/addPages?type=edit&paramId=` + id, '_blank')})},// 获取接口数据getOptions() {listEmployee({current: this.current,pageSize: 15,params: {teamId: this.$store.getters.teamId,projectId: this.$store.getters.projectId,status: '0'}}).then(res => {this.loading = falsethis.listData.push(...res.rows)if (this.listData.length === res.total) {clearInterval(this.timer)}})},// 轮播方法listSwiper() {this.swiperOption = { // 控制大于4张图片的时候自动轮播loop: true,mousewheel: true,observer: true, // 修改swiper自己或子元素时，自动初始化swiperobserveParents: true, // 修改swiper的父元素时，自动初始化swiperautoplay: {delay: 3000,disableOnInteraction: false // 手动滑动后继续自动播放},speed: 1000,direction: 'vertical',slidesPerView: 5,slidesPerGroup: 5}/* this.listData.length >= 5 ? this.swiperOption = { // 控制大于4张图片的时候自动轮播loop: true,observer: true, // 修改swiper自己或子元素时，自动初始化swiperobserveParents: true, // 修改swiper的父元素时，自动初始化swiperautoplay: {delay: 5000,disableOnInteraction: false // 手动滑动后继续自动播放},speed:1000,direction: 'vertical',slidesPerView : 5,  // 显示5条数据slidesPerGroup : 5, // 5条数据为一组} : this.swiperOption = {autoplay: false,slidesPerView: 5, //direction: 'vertical',loop: false, // 无限轮播simulateTouch: false // 禁止鼠标模拟}*/},// 鼠标进入停止自动轮播on_top_enter() {this.mySwiper.autoplay.stop()},// 鼠标移除自动轮播on_top_leave() {this.mySwiper.autoplay.start()}}
}
</script><style lang="scss" scoped>.table-container{width: 100%;height: 100%;overflow: hidden;.table_head{width: 100%;height: 20%;&--list{width: 100%;height: 40px;display: flex;justify-content: space-between;align-items: center;font-size: 14px;color: #ffffff;margin:0;background: linear-gradient(0deg, rgba(13, 95, 215, 0.1),rgba(13, 95, 215, 0.3));& > li{width: 13%;text-align: center;/*flex: 1;*/}& > li:first-child,& > li:nth-child(2){width: 7%;}}}
/*.swiper-slide-active{background: rgba(0, 26, 68, 0.7);}*/.seamless-warp {height: 80%;overflow: hidden;padding: 5px 0;display: flex;justify-content:center;align-items: center;.item{color: #fff;list-style: none;.listdata{width: 100%;/*height: 27px;*/display: flex;justify-content: space-between;align-items: center;cursor: pointer;& > span{/*flex: 1;*/width: 13%;font-size: 12px;text-align: center;}& > span:first-child,& > span:nth-child(2){width: 7%;}}/*.swiperslide:nth-child(2n){background: rgba(0, 26, 68, 1);}*/}}}</style>
<style lang="scss" scoped>.swiper-container{width: 100%;height: 100%;}.swiperslide{display: flex;align-items: center;}.swiperslide:nth-of-type(odd){background: rgba(0, 26, 68, 1);}
</style>

vue-awsome-swiper稳定版本3.1.3及使用方法，API见swiper官网https://www.swiper.com.cn/api/index.html相关推荐

lightroom最新版本下载_win10系列之如何最快速从微软官网下载最新版本iso映像
认准官方网站关于下载资源,很多人可能还在用百度搜索,稍有不慎可能就会误入歧途,甚至中招病毒木马.下面是百度.必应国内.谷歌搜索win10下载关键词的对比结果,没想到微软亲儿子必应在国内也把win10 ...
carlife Android版本,carlife车机端app下载-百度carlife车机端官网app下载安卓版 v5.4.2-友情手机站...
百度carlife车机端官网app是百度新推出的一款全系另类的是服务应用软件平台,用户们在百度carlife车机端官网里进行全新且全面的地图导航.音乐电台.打电话等更多实用功能.同时也是全球范围内兼容 ...
python3最新稳定版本-python3稳定版
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 美国时间6月27日晚8点,python 3. 7. 0 经过多轮测试,终 ...
【Linux 内核】编译 Linux 内核 ① ( 下载指定版本的 Linux 内核源码 | Linux 内核版本号含义 | 主版本号 | 次版本号 | 小版本号 | 稳定版本 )
文章目录一.下载 Linux 内核 1.下载最新版本 Linux 内核 2.下载指定版本 Linux 内核二.Linux 内核版本号含义一.下载 Linux 内核 1.下载最新版本 Linux ...
Node.js 官网入门教程（二） npm（安装、包版本、卸载、npx）、package.json（scripts、devDependencies）package-lock.json（语义版本规则符号
Node.js 官网入门教程(二) npm(包管理.安装.包版本.卸载.npx).package.json(scripts.devDependencies).package-lock.json(语义版 ...
LiteFlow v2.7.1版本发布新版官网上线
一 LiteFlow的重大更新版本v2.7.1今天正式发布! 同时对于2.7.1的版本,整个文档很多章节也重新写了,补了很多文档.这次的文档比之前更加详细.对用户更加友好了. 对于2.6.X版本的用户 ...
如何在Centos官网下载所需版本的Centos——靠谱的Centos下载教程
很多小伙伴不知道对应版本的Centos怎么下载,最近小编整理了一份Centos详细的下载教程,希望小伙伴们不在为下不到对应版本的Centos而苦恼. 1.进入Centos官网:https://www. ...
怎么在微软官网找到visual studio历史版本
标题怎么在微软官网找到visual studio历史版本 ***首先进入微软官网https://www.microsoft.com/zh-cn/点击所有Microsoft下的visual studio ...
如何在mysql官网下载mysql最新或者以前的版本
之前一直使用oracle数据库,很久没有使用mysql数据库了,最近公司有一个项目需要用到mysql的最新版本也就是5.7,然后我想着去官网去下载一个,可是打开官网就有点蒙了,找了大半天才找到,因此把 ...
【数据库MySQL】2021最新官网下载及查看MySQL版本步骤教程
下载教程最新版本下载历史版本查看及下载查询MySQL版本号进阶:[MySQL安装及配置](https://blog.csdn.net/TheChany/article/details/1209 ...

vue-awsome-swiper稳定版本3.1.3及使用方法，API见swiper官网https://www.swiper.com.cn/api/index.html

1.npm和yarn安装/卸载执行命令

2.安装方法：

3.vue-awsome-swiper引用方式

vue-awsome-swiper稳定版本3.1.3及使用方法，API见swiper官网https://www.swiper.com.cn/api/index.html相关推荐

最新文章

热门文章