我使用的是mui+vue,社区关于轮播图失效的问题也有几个。我这边遇到的一个情况是我把所有的东西都写到plusReady事件中会导致轮播图搞死都不动,按照其他问答解决了vue生命周期等等的问题。提出来写没问题。放进去有不动了。

mui.plusReady(function() {
//很多代码
});

结果在mui.js中看到mui会自动初始化轮播图。把这句注释掉就可以动了。

mui.js第5088行

//$('.mui-slider').slider();
        //MUI框架初始化
mui.init({});
//HTML5+API准备就绪
mui.plusReady(function() {
var pageModel = new Vue({
//插值符号
delimiters: ['{#', '#}'],
//绑定节点
el: '#vue-page',
//数据定义
data: {
//轮播图列表[此处仅定义数据结构]
sliderLists: [{
title: '', //幻灯片标题
url: '', //幻灯片链接地址
image: '' //幻灯片图片地址
}]
},
//方法定义
methods: {
},
//前置操作
mounted: function() {
/**
* 赋值轮播图
* 1.先从本地缓存读取尽快呈现页面
* 2.如服务器有更新则后台下载更新
*/
//获取本地存储
var sliderLists = plus.storage.getItem('sliderLists');
if(sliderLists) {
//调试
console.log(sliderLists); } else { //使用默认数据
this.sliderLists = [{
title: '',
url: '',
image: '../static/image/slider-01.jpg'
}, {
title: '',
url: '',
image: '../static/image/slider-02.jpg'
}, {
title: '',
url: '',
image: '../static/image/slider-03.jpg'
}, {
title: '',
url: '',
image: '../static/image/slider-04.jpg'
}];
}
},
//更新
updated: function() {
mui('#slider').slider({
interval: 3000 //自动播放周期
});
}
});
});

解决方案:

    而nextTick 主动渲染 Dom后,是无法获取到 mui(#slider)对象的。

mui("#slider").slider({
interval: 3000
});

在 Vue的生命周期钩子:updated 中 执行 代码如下:

updated: function() {
var sliderMuiObj = mui("#slider");
sliderMuiObj.slider({
interval: 3000
});
},

最后提供一个案例演示:【点击下载

使用Vue-MUI轮播图失效问题解决案例(在Vue的update中执行)的更多相关文章

  1. vue+mui轮播图

    mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...

  2. mui轮播图为什么设置了自动播放参数也不能自动播放呢?

    最近在做项目的时候,发现Mui的轮播图遇到个问题,设置了自动播放但是怎么也不能自动播放,这是为什么呢? 原来如果动态给mui的图片轮播添加图片,又使用的ajax获取的数据,但是你ajax 还没有执行完 ...

  3. vue自定义轮播图组件 swiper

    1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...

  4. mui轮播图

    轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播.可拖动式图文表格.可拖动式选项卡.左右滑动9宫格等组件,这些组件有较多共同点.Dom构造: <div class=&qu ...

  5. vue项目轮播图的实现

    利用   Vue-Awesome-Swiper插件来做轮播效果,github地址:https://github.com/surmon-china/vue-awesome-swiper 安装 npm i ...

  6. vue简易轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 两个页面实现mui轮播图与选项卡结合

    index.html页面 <!DOCTYPE html><html><head> <meta charset="utf-8"> &l ...

  8. vue实现轮播图

    /* Start  基本样式*/ * {   margin: 0;   padding: 0; } ul {   list-style-type: none; } body {   font-size ...

  9. vue编写轮播图组件

    <template>  <div id="slider">    <div class="window" @mouseover=& ...

随机推荐

  1. 分布式任务调度XXL-JOB初体验

    简介 XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源代码并接入多家公司线上产品线,开箱即用. 官方文档很完善,不多赘述.本文主要是搭建XX ...

  2. 自定义配置JNOJ

    OJ 全名 online judge 在线判题系统,对于从事编程竞赛的人来说一点都不陌生,今天我们讨论的是怎么样自定义搭建 推荐的开源的OJ有hustOJ,JNOJ 因为hustOJ 是一键安装脚本, ...

  3. maven的核心概念——创建war工程

    第十七章第四个Maven工程(war工程) 17.1 创建步骤 ①第一步:创建maven web工程 ②第二步:修改web.xml <?xml version="1.0" e ...

  4. Gin框架之文件上传

    一.单文件上传 前端代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>上传文 ...

  5. 论文阅读笔记(二十一)【CVPR2017】:Deep Spatial-Temporal Fusion Network for Video-Based Person Re-Identification

    Introduction (1)Motivation: 当前CNN无法提取图像序列的关系特征:RNN较为忽视视频序列前期的帧信息,也缺乏对于步态等具体信息的提取:Siamese损失和Triplet损失 ...

  6. Window Api 通过账号密码访问共享文件夹

    using System; using System.Runtime.InteropServices; namespace PushGCodeService { public class Shared ...

  7. WIN10开启FTP(完整版)

    1.控制面板 --> 程序--> 启用或关闭windows功能 2.左下角搜索栏搜索IIS(iis) 3.右键添加FTP站点 4.创建站点名字和目录 5.绑定本机IP地址,SSL勾选无SS ...

  8. Jquery基础(动画效果的轮播图特效)

    jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...

  9. How Many Tables HDU - 1213

    #include<iostream> using namespace std; ; int p[N]; int find(int x) { if(p[x]!=x) p[x]=find(p[ ...

  10. Docker学习参考网站

    Docker——从入门到实践 https://www.yuque.com/grasilife/docker 2.阿里源网站:https://cr.console.aliyun.com 3.DaoClo ...