在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??
是因为swiper提前初始化了,那时候数据还没有完全出来。这里有两种解决办法
1. 使用vue提供的$nextTick()方法
当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像。
在数据初始化完毕之后,再初始化swiper就不会出现问题了
this.$nextTick(function () {
              var swiper = new Swiper('.swiper-container', {
        此处省略
         })
            })
2.在swiper初始化的时候
swiper1 = new Swiper('.swiper-container', {
    initialSlide :0,
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true//修改swiper的父元素时,自动初始化swiper
});

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??的更多相关文章

  1. vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

    vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492   vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...

  2. vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...

  3. 一、表单和ajax中的post请求&&后台获取数据方法

    一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...

  4. vue 中的translation操作----动态值

    在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...

  5. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  6. vue单页应用中,使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。

    使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...

  7. vue中watch和computed为什么能监听到数据的改变以及不同之处

    先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...

  8. JS从后台获取数据,前台动态添加tr标签中的td标签

    功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...

  9. vue 的父组件和子组件互相获取数据和方法

    父组件主动获取子组件的数据和方法 一.ref(但不能实时更新获取) 1.调用子组件的时候 定义一个ref <child ref="headerChild"></c ...

随机推荐

  1. 《黑白团团队》第八次团队作业:Alpha冲刺 第四天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第四天 日期:2019/6/18 成员 ...

  2. 端到端图片识别 Python实现 Tensorflow

    基于python语言的tensorflow的‘端到端’的字符型验证码识别 1   Abstract 验证码(CAPTCHA)的诞生本身是为了自动区分 自然人 和 机器人 的一套公开方法, 但是近几年的 ...

  3. Redis,Memcache的区别和具体应用场景

    1. Memcached简介 Memcached是以LiveJurnal旗下Danga Interactive公司的Bard Fitzpatric为首开发的高性能分布式内存缓存服务器.其本质上就是一个 ...

  4. [Android中级]使用Commons-net-ftp来实现FTP上传、下载的功能

    本文属于学习分享,如有雷同纯属巧合 利用业余时间.学习一些实用的东西,假设手又有点贱的话.最好还是自己也跟着敲起来. 在android上能够通过自带的ftp组件来完毕各种功能.这次是由于项目中看到用了 ...

  5. Codeves 2800 送外卖 状态压缩DP+floyd

    送外卖     题目描述 Description 有一个送外卖的,他手上有n份订单,他要把n份东西,分别送达n个不同的客户的手上.n个不同的客户分别在1~n个编号的城市中.送外卖的从0号城市出发,然后 ...

  6. C# 遍历文件夹及子目录下所有图片.

    要求:取指定目录下面的所有图片,以表格的型式展示并显示该图片的相对路径. 服务端代码: public partial class ViewIcon : System.Web.UI.Page { JAr ...

  7. 使用IDEA 创建 MAVEN 项目

    一,项目创建 1.File---New---project    选择maven       勾选Create from archtype,找到并选择org.apache.maven.archtype ...

  8. ROS常用知识指南

    前言:介绍一些基础常用的知识. 一.标准单位 二.坐标表现方式 三.默认安装位置 通过apt-get安装的软件包, 默认安装位置为:/opt/ros/kinetic/share 四.软件包安装流程 4 ...

  9. C#---爬虫抓取系列

    以前就尝试过研究了一些爬虫程序,也找过一些爬虫抓取软件,效果不是很好. 今天正好一个培训的网友给了我一个视频,正好研究下,收获颇丰.感谢那位哥们~ 1.首先讨论一下抓取一个页面 这里我写了模仿写了一个 ...

  10. 格式化日期字符串 FormatSettings使用

    如果 你想要得到 YYYY-MM/DD 这样的字符串 你肯定说这太简单了  直接 ShowMessage(FormatDateTime('YYYY-MM/DD',now)); 运行结果 YYYY-MM ...