vue awesome swiper异步加载数据出现的bug问题

本人第一次使用vue awesome。

踩到的坑确实不少。官网上面的用法写的很简单，按照上面做法基本会遇到如下这个问题

轮播第二次之后，首屏会自动跳过

网上找了很多资料，都不能解决这个问题。于是自己琢磨了很久终于灵光一闪。一个小技巧解决了这个问题。

使用方法应该很简单，去官网可以查看到方法。基本步骤如下

npm install vue-awesome-swiper --save-dev

在main.js中

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

在vue组件中

图中标红就是解决办法，因为swiper需要在数据加载之后初始化，但是vue swiper暂时并没有提供这个方法（也有可能是我不知道这个方法）所以当数据加载之后

这样即可解决首屏的问题！

下面贴上配置的代码

swiperOption:{
    loop:true,
    notNextTick: true,
    mousewheelControl: true,
    autoplayDisableOnInteraction:false,
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
    paginationClickable: true,
    autoplay : {
     delay:3000
    },
    observer:true,
    speed:300,
    pagination: {
     el: '.swiper-pagination',
     clickable: true
    }

再一个就是app中触屏滑动之后不能自动轮播的bug问题，已解决下面贴图

将disableOnInteraction设置为false即可

总结

以上所述是小编给大家介绍的vue awesome swiper异步加载数据出现的bug问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

  • VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

    VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

    Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使用的比较频繁的插件,现在分享一下使用方法以及开发中会遇到的一些问题. 我们先下载包,然后去main.js里面配置. npm install vue-awesome-swiper --save 我们可以用import的方法 //import import Vue from 'vue' import VueAwesomeSwiper f

  • vue-awesome-swiper滑块插件使用方法详解

    vue-awesome-swiper滑块插件使用方法详解

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 github地址: https://github.com/surmon-china/vue-awesome-swiper.git 1.进入项目目录,安装swiper npm install vue-awesome-swiper --save 2.引入资源 //vue滑块 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwi

  • vue引入新版 vue-awesome-swiper插件填坑问题

    vue引入新版 vue-awesome-swiper插件填坑问题

    本文介绍了关于新版 vue-awesome-swiper,分享给大家,具体如下: 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播放? 为什么我的vue-awesome-swiper没有? 使用 引入(前面的步骤和往常一样) npm install vue-awesome-swiper --save 在 main,js 里引入(全局): import VueAwesomeSwiper from

  • vue轮播图插件vue-awesome-swiper

    Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR. 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var

  • vue轮播图插件vue-awesome-swiper的使用代码实例

    最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤: 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesom

  • vue awesome swiper异步加载数据出现的bug问题

    本人第一次使用vue awesome. 踩到的坑确实不少.官网上面的用法写的很简单,按照上面做法基本会遇到如下这个问题 轮播第二次之后,首屏会自动跳过 网上找了很多资料,都不能解决这个问题.于是自己琢磨了很久终于灵光一闪.一个小技巧解决了这个问题. 使用方法应该很简单,去官网可以查看到方法.基本步骤如下 npm install vue-awesome-swiper --save-dev 在main.js中 import VueAwesomeSwiper from 'vue-awesome-swi

  • 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

    Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • 详解Vue-Cli 异步加载数据的一些注意点

    刚开始学vue的时候没有使用脚手架,现在用脚手架写法有点不同,今天遇到的问题是使用豆瓣api异步加载数据的时候,会一直在命令行上报错,基本上错误都是xxx 未定义. 例子 <template> <div v-if="moviesData"> <!-- 正在上映的电影-北京 --> <h1>{{ moviesData.title }}</h1> </div> </template> <script&

  • vue ElementUI实现异步加载树

    本文实例为大家分享了vue ElementUI实现异步加载树的具体代码,供大家参考,具体内容如下 路由文件修改 import List from '@/components/list.vue' import Add from '@/components/add.vue' import Tree from '@/components/tree.vue' import AsynTree from '@/components/asyntree.vue' export default{ routes:[

  • Android异步加载数据和图片的保存思路详解

    把从网络获取的图片数据保存在SD卡上, 先把权限都加上 网络权限 android.permission.INTERNET SD卡读写权限 android.permission.MOUNT_UNMOUNT_FILESYSTEMS android.permission.WRITE_EXTERNAL_STORAGE 总体布局 写界面,使用ListView,创建条目的布局文件,水平摆放的ImageView TextView 在activity中获取到ListView对象,调用setAdapter()方法

  • 使用DataTable插件实现异步加载数据

    table部分代码 <table class="table table-bordered table-striped" id="table-main"> <thead> <tr> <th>用户名</th> <th>渠道名</th> <th>游戏名</th> <th>结果</th> <th>耗时</th> <

  • Android开发实现ListView异步加载数据的方法详解

    Android开发实现ListView异步加载数据的方法详解

    本文实例讲述了Android开发实现ListView异步加载数据的方法.分享给大家供大家参考,具体如下: 1.主Activity public class MainActivity extends Activity { private ListView listView; private ArrayList<Person> persons; private ListAdapter adapter; private Handler handler=null; //xml文件的网络地址 final

  • vue+webpack实现异步加载三种用法示例详解

    1.第一例 const Home = resolve => { import("@/components/home/home.vue").then( module => { resolve(module) } } 注:(上面import的时候可以不写后缀) export default [{ path: '/home', name:'home', component: Home, meta: { requireAuth: true, // 添加该属性可以判断出该页面是否需要

  • 关于layui的下拉搜索框异步加载数据的解决方法

    思路分析:当我使用layui默认的下拉搜索框的时候,layui会默认渲染出一个HTML结构,所以我把渲染出来的这个结果直接给复制出来,这样css的样式就不用从头到尾写一遍了, 前端代码(我用的是jsp): <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC &quo

随机推荐