vue 使用 vue-awesome-swiper（swiper）解决方法

一、安装
npm install swiper vue-awesome-swiper@v3.2.0 --save

二、页面引入

*这里说明一下：完全不用在main.js写那些没用的，仅需要当前组件或者页面引入一下就行

import { Swiper } from "vue-awesome-swiper";
import 'swiper/dist/css/swiper.css'

三、详细

         <div class="swiper-container swiper-no-swiping"><div class="swiper-wrapper"><div class="swiper-slide" v-for="item of swiperList" :key="item.index" ><div class="clearFix"><img :src="item.imgUrl" /></div><p>{{item.txt}}</p></div></div><!-- 分页符 --><div class="swiper-pagination"></div><!-- 前进后退按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>

<script>
import { Swiper } from "vue-awesome-swiper";
import 'swiper/dist/css/swiper.css'
export default {name: 'index',data () {return {swiperList: [{id:"1",title:"###",imgUrl: require('../assets/images/1_03.jpg'),txt:"###"},{id:"2",title:"###",imgUrl: require('../assets/images/1_03.jpg'),txt:"###"},],}},mounted(){this.mySwiper=  new Swiper('.swiper-container', {autoplay: true,    //自动播放loop: true,        //循环播放wdelay: 3000,       //每张图间隔三秒//分页器pagination: {el: ".swiper-pagination"},//左右前进后退按钮navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev"}});},}<script>

.mainCont .swiper-container{position: relative;width: 300px;height: 138px;overflow: hidden;}
.mainCont .swiper-container .swiper-slide{width:100%;height: 138px}
.mainCont .swiper-container .swiper-slide img{width: 100%;margin-bottom: 30px;float: left}
.mainCont .swiper-container .swiper-slide p{font-size: 42px;line-height: 66px;color: #333}

vue 使用 vue-awesome-swiper（swiper）解决方法相关推荐

vue 报错unknown custom element解决方法
vue 报错unknown custom element解决方法参考文章: (1)vue 报错unknown custom element解决方法 (2)https://www.cnblogs.co ...
vue v-html 动态内容样式无效解决方法
vue v-html 动态内容样式无效解决方法参考文章: (1)vue v-html 动态内容样式无效解决方法 (2)https://www.cnblogs.com/mengfangui/p/122 ...
eslint 验证vue文件报错 unexpected token =解决方法
eslint 验证vue文件报错 unexpected token =解决方法参考文章: (1)eslint 验证vue文件报错 unexpected token =解决方法 (2)https: ...
vue IE下验证码无法显示解决方法
vue IE下验证码无法显示解决方法使用axios进行get请求,返回格式为文件流可以使用一下方法解决 axios({method: 'get',url: '/verifyCode/authImag ...
Better Scroll+Vue、div的@click无效解决方法
better-scroll+Vue.div的@click无效解决方法正常情况,div可以直接点击 <template><div><div @click="di ...
Vue packages version mismatch 报错解决方法
一般的解决方法是更新vue到与vue-template-compiler同版本. 检查一年package.json中关于两者的配置是否相同,若不同,修改成一样即可. 注意: 关于^和~说明: (1)指 ...
ant vue 兼容性问题_Ant Design of Vue使用遇到的问题以及解决方法总结
解决方法:将参数 destroyOnClose 设置为true,表示当关闭时自动销毁Modal的子元素. 问题2:控件select的备选项option标签属性key和value值的区别? 解决方法: ...
vue 导入element-ui css报错解决方法
组件使用参照官网http://element.eleme.io/#/zh-CN/component/quickstart 在 main.js 中写入以下内容: 1 2 3 4 5 6 import V ...
vue搜不到c_vue不是内部命令、安装@vue/cli失败、找不到vue.cmd文件等问题的解决方法...
最近打算用vue-cli写项目,发现用官网提供的安装方式npm install @vue/cli -g怎么都安装不上,一直报如下错误 EPERM: operation not permitted, r ...
安装vue/cli的一些警告的解决方法
一.vue/cli 1.npm WARN vue-virtual-scroller@1.0.0-rc.2 requires a peer of vue@^2.5.21 but none is inst ...

vue 使用 vue-awesome-swiper（swiper）解决方法

vue 使用 vue-awesome-swiper（swiper）解决方法相关推荐

最新文章

热门文章