vue渲染数据后与owlCarousel轮播插件冲突,失效
主要原因:dom解析准备完成后,开始执行$(document).ready(); 而vue是在window.onload(页面加载完后才执行);所以会导致owlCarousel插件失效。
解决方案:数据渲染后,更新dom;再调用插件。(vue的 this.$nextTick可以更新dom)
1.引入owlCarousel插件,vue,jq
(function ($) {
new Vue({
el: '#owl-demo1',
data:{
aboutData:[],
getRouteUrl: '/resume'
},
created: function () {
this.getRoute();
},
methods: {
getRoute: function () {
var that = this;
that.$http({
method: 'GET',
url: this.getRouteUrl
}).then(function(response){
this.aboutData = response.data;
this.$nextTick(function () { // ==》更新dom后,执行轮播
$("#owl-demo1").owlCarousel({
items : 1,
lazyLoad : false,
autoPlay : true,
navigation : false,
navigationText : false,
pagination : false,
});// => '更新完成'
})
},function (error) {
console.log(error);
})
}, } })
})(jQuery)
=======》这里用即时函数,使vue内可使用jq,因为owlCarousel 是jq插件。
<div id="owl-demo1" class="owl-carousel">
<div class="item" v-for="value in aboutData">
<h2>{{value.title}} <span>{{value.name}}</span></h2>
<p>{{value.content}}</p>
</div>
</div>
===》这样渲染的轮播就可以生效了
vue渲染数据后与owlCarousel轮播插件冲突,失效的更多相关文章
- owl-carousel轮播插件的使用
插件github地址:https://github.com/OwlFonk/OwlCarousel: 插件官网演示地址:http://owlgraphic.com/owlcarousel/: 1.选择 ...
- Vue渲染数据理解以及Vue指令
一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...
- 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件
后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- H5滚动轮播插件
概述 JRedu 随着前端技术的发展,越来越多的H5技术被应用到实际开发中,尤其是js插件更是无处不用,本章节我们主要分享下如何去自己封装一个滚动轮播插件. 1效果图如下: 2主要功能 支持超 ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 一款好用的轮播插件swiper,适用于移动端和web
swiper的dom布局 <div id="commentsSwiper" class="swiper-container"> <div cl ...
- vue-awesome-swiper轮播插件
1. github上搜索vue-awesome-swiper 2. readme中有安装方法,建议在插件名后@版本号,使用稳定的老版本 npm install vue-awesome-swiper@x ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
随机推荐
- 关于Trie KMP AC自动机
个人认为trie,KMP,AC自动机是思想非常明确的,AC自动机的性质是与KMP算法的思想类似的(失配后跳转) 而KMP是线性的,AC自动机是在tire树上跑KMP,为方便那些不会用指针的小朋友(我也 ...
- 解决Appium 抓取toast
首先我们先看看这个gif,图中需要,要抓取的字符串--->请输入转让份数 1.要导入java-client-5.0.0-SNAPSHOT.jar 包的地址:链接:http://pan.baidu ...
- Python之路-基本数据类型
一.数据类型 1.数字 包含整型和浮点型,还有复数2.字符 长度,索引,切片也适用于列表的操作 移除空白 strip() 默认字符串前后的空格,制表符,换行符 strip(";") ...
- 统一我的博客文章的CSS样式代码
一.前因后果 之前写博客的时候也有写一些CSS代码来美化,不过都是凌乱的,每次再写一篇,又得重头来过去想,或者去拷贝原来的CSS设置.由于逻辑性不强,找一个配套的格式出来要花费不少时间. 今天我把部分 ...
- 老李分享: Oracle Performance Tuning Overview 翻译下
1.2性能调优特性和工具 Effective data collection and analysis isessential for identifying and correcting perfo ...
- 七个 Android 程序猿提高效率必备工具
Android 程序猿提高效率必备工具 0x00 Code tree for GitHub 这个 Chrome 浏览器插件.Github 作为最大同性交友网站,每天的工作几乎是从打开这个网站开始的.当 ...
- [转]使用sklearn进行集成学习——理论
转:http://www.cnblogs.com/jasonfreak/p/5657196.html 目录 1 前言2 集成学习是什么?3 偏差和方差 3.1 模型的偏差和方差是什么? 3.2 bag ...
- 用 config drive 配置网络 - 每天5分钟玩转 OpenStack(173)
上一节最后问了大家一个问题:如果 subnet 没有开 DHCP,会是怎样一个情况? 在其他条件不变的情况下,cloud-init 依然会完成那 3 个步骤,也就是说网卡还是会被配置成 dhcp 模式 ...
- WPF中的RichTextBox
原文链接:http://blog.csdn.net/wuzhengqing1/article/details/7010902 取出richTextBox里面的内容 第一种方法:将richTextBox ...
- MySQL学习笔记(四)—存储过程
一.概述 存储过程是数据库定义的一些SQL语句的集合,然后直接调用这些存储过程和函数来执行已经定义好的SQL语句.存储过程可以避免开发人员重复的编写相同的SQL语句,而且存储过程是在MySq ...