解决几个vue中是swiper插件遇到的bug

1、在使用swiper插件的时候,如果内容都是静态资源的话不会出现错误,但是动态的话会出现划不动,或者白屏

分析:这种bug是怎样出现的,一般都是初始化的位置不对

方法:

swiperInit() {
    var mySwiper = new Swiper(‘.swiper-container‘, {
        pagination : ‘.swiper‘,
        paginationType : ‘bullets‘,
        autoplay : 200,

    })
}
//这个是swiper的初始化方法,如果你是在created钩子函数中执行的那么,肯定会出现bug,如果你在moutend里面初始化,//就要看你的请求数据是在哪里执行的,如果在初始化之后,同样会出现bug,我个人建议,在updated钩子函数里面取初始化,//因为这时候数据变化了以后,资源准备完毕了

 2、移动端项目中,手机版本低的时候,会出现什么都没有的情况

分析:这种bug出现的情况还是比较多的,如果兼容低版本,你就需要知道,部分低版本不兼容es6,而swiper使用了es6语法

方法:

//1.解决方法是在项目根目录下新建一个文件vue.config.js,在里面添加如下代码:
module.exports = {
  chainWebpack: config => {
    config.rule(‘js‘).include.add(/node_modules\/(dom7|swiper)\/.*/)
  }
}//2.这种方法就是强推,也就是不兼容太低的版本,因为也没有多少人用那么老的系统版本,如果遇到了,用户反馈,让他升级,对于我们前端人员来说这种方式是最好的!

  

原文地址:https://www.cnblogs.com/ctb-web/p/9360406.html

时间: 2024-08-25 20:56:04

解决几个vue中是swiper插件遇到的bug的相关文章

vue中引入swiper插件

这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' 3.然后注册全局的swiper Vue.use(VueAwesomeSwiper) 4.在模板中使用 //引入swiper.cssrequire('swiper/dist/css/swiper

Vue中的better-scroll插件

Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScroll(Dom对象, {//options startX: 0, startY: 0 }) Vue获得Dom对象方法, <div v-el:food-wrapper></div>//定义对象 this.$els.foodWrapper//获取对象 (Vue 更新数据时是异步的,所以在数据未

在angular中使用swiper插件轮播无效的原因

我在angular中使用swiper插件时总会出现轮播不运行. 做项目么,肯定会使用路由实现切换的效果,我在做项目时总喜欢先把内容渲染在主页面上,当所要实现的效果都实现时,然后再把数据拿出来放在子页面上,通俗的讲就是把他放在另一个页面上,通过路由去获取信息. 1.在用路由中实现时一定要在路由里加上控制器controller 1 app.config(function ($routeProvider) { 2 $routeProvider.when('/index', { 3 templateUr

在 vue 中使用 swiper 的异步问题解决

一.html 及引入文件 1.引入文件 vue,axios,mock,swiper,jquery的js文件 swiper css文件 2.css样式 给 swiper 设置宽高 3.html swiper html swiper使用方法:  https://www.swiper.com.cn/usage/index.html 二.渲染数据 1.  用mock生成随机虚拟数据 2. 用 axios 执行get请求 请求数据 并赋值给data中的imgList 3.循环使用v-for指令绑定数据渲染

在vue中利用vue-qr插件动态生成二维码并嵌入LOGO

收到需求要生成二维码的时候刚进项目组不久,接触vue也才一两个星期,还处于懵逼状态. 本小白的第一反应就是百度二维码的生成方法,网上有很多大神给出解决方案,最开始本小白以为是在后台生成图片然后传到前台页面,后来发现可以直接在前端用js生成,网上查到的大部分都是用jquery.qrcode.js配合utf.js(为了支持中文)和jquery-1.8.0.js来实现,亲测可行(但本白只在原生HTML中实现,vue中死活报错:"找不到qrcode方法",是不是本小白没找准姿势,哪位大神求告知

vue中修改swiper样式

问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang="scss"> .swiper-container{ .swiper-pagination{ .swiper-pagination-bullet{ width: 14px; height: 14px; } } } </style>// 项目中多次使用swiper 的话 就

vue-cli -- vue中使用swiper

一.滑块组件 1.vue中Swiper 1.安装swiper npm install swiper -S 2.启用swiper Vue.use(swiper) 3.引入swiper样式 在index.html或者main.js文件中引入css样式文件 import '../swiper.css' 原文地址:https://www.cnblogs.com/zjh-study/p/10647782.html

vue中使用vue-pdf插件显示pdf

项目需求需要在vue中展示pdf,vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一, 安装依赖 npm install --save vue-pdf 二, 基本示例 <template> <div class="pdf"> <pdf ref="pdf" :src="pdfUrl"> </pdf> </div> </template> <scri

vue项目中使用swiper插件遇到的坑

<style scoped> .swiper-pagination-bullets  >>> .swiper-pagination-bullet-active {  background: orange; } /* >>> 在vue中有穿透的作用 */ </style> 原文地址:https://www.cnblogs.com/1609359841qq/p/12092723.html