使用Vue-MUI轮播图失效问题解决案例(在Vue的update中执行)
我使用的是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中执行)的更多相关文章
- vue+mui轮播图
mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...
- mui轮播图为什么设置了自动播放参数也不能自动播放呢?
最近在做项目的时候,发现Mui的轮播图遇到个问题,设置了自动播放但是怎么也不能自动播放,这是为什么呢? 原来如果动态给mui的图片轮播添加图片,又使用的ajax获取的数据,但是你ajax 还没有执行完 ...
- vue自定义轮播图组件 swiper
1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...
- mui轮播图
轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播.可拖动式图文表格.可拖动式选项卡.左右滑动9宫格等组件,这些组件有较多共同点.Dom构造: <div class=&qu ...
- vue项目轮播图的实现
利用 Vue-Awesome-Swiper插件来做轮播效果,github地址:https://github.com/surmon-china/vue-awesome-swiper 安装 npm i ...
- vue简易轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 两个页面实现mui轮播图与选项卡结合
index.html页面 <!DOCTYPE html><html><head> <meta charset="utf-8"> &l ...
- vue实现轮播图
/* Start 基本样式*/ * { margin: 0; padding: 0; } ul { list-style-type: none; } body { font-size ...
- vue编写轮播图组件
<template> <div id="slider"> <div class="window" @mouseover=& ...
随机推荐
- 分布式任务调度XXL-JOB初体验
简介 XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源代码并接入多家公司线上产品线,开箱即用. 官方文档很完善,不多赘述.本文主要是搭建XX ...
- 自定义配置JNOJ
OJ 全名 online judge 在线判题系统,对于从事编程竞赛的人来说一点都不陌生,今天我们讨论的是怎么样自定义搭建 推荐的开源的OJ有hustOJ,JNOJ 因为hustOJ 是一键安装脚本, ...
- maven的核心概念——创建war工程
第十七章第四个Maven工程(war工程) 17.1 创建步骤 ①第一步:创建maven web工程 ②第二步:修改web.xml <?xml version="1.0" e ...
- Gin框架之文件上传
一.单文件上传 前端代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>上传文 ...
- 论文阅读笔记(二十一)【CVPR2017】:Deep Spatial-Temporal Fusion Network for Video-Based Person Re-Identification
Introduction (1)Motivation: 当前CNN无法提取图像序列的关系特征:RNN较为忽视视频序列前期的帧信息,也缺乏对于步态等具体信息的提取:Siamese损失和Triplet损失 ...
- Window Api 通过账号密码访问共享文件夹
using System; using System.Runtime.InteropServices; namespace PushGCodeService { public class Shared ...
- WIN10开启FTP(完整版)
1.控制面板 --> 程序--> 启用或关闭windows功能 2.左下角搜索栏搜索IIS(iis) 3.右键添加FTP站点 4.创建站点名字和目录 5.绑定本机IP地址,SSL勾选无SS ...
- Jquery基础(动画效果的轮播图特效)
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- 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[ ...
- Docker学习参考网站
Docker——从入门到实践 https://www.yuque.com/grasilife/docker 2.阿里源网站:https://cr.console.aliyun.com 3.DaoClo ...