Tag: slider预览模式: 普通 | 列表

疑问已解决：vue.js在采用ajax方式读入数据后，无法激活slide插件的滑动行为已经解决

作者:admin  日期:2016-01-22

在vue.js的git上面提交的issue:

 
我在mui+vue.js构建一个slide-pic组件，图片数据用ajax方式获取，vm数据能获取到，dom也发生了相应的改变。但数据读入后，无法激活slide组件的滑动行为。
 
以下是我做的一些探索:
直接使用vue初始化数据（非ajax）可以激活滑动行为。
使用jquery的append方式，把数据结合到dom后，也可以激活。
我将mui的slide-pic组件换成另一个滑动图插件TouchSlide1.1后，同样的现象，用vm方式无法激活。
 
请问这是什么原因？到底是vue还是mui/TouchSlide 插件机制的问题。
 
XML/HTML代码
  1. 以下是无法激活滑动的主要代码：  
  2.   
  3. <div id="slider" class="mui-slider" >  
  4.      <div class="mui-slider-group">  
  5.        <div class="mui-slider-item" v-for="el in list"><img :src="el.picUrl"> </div>  
  6.      </div>  
  7. </div>  
  8.   
  9. <script>  
  10. var vm = new Vue({  
  11.   el: '#slider',  
  12.   data: {list: [] }  
  13. });  
  14.   
  15.   
  16. // 读取图片slide  
  17. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  18.      success: function(data){  
  19.           vm.list = data.list;  
  20.           mui("#slider").slider({  
  21.                interval: 3000  
  22.           });  
  23.      }  
  24. });  
  25. </script>  
  26. ----------------------------------------------  
  27. 以下是可以成功激活的代码：  
  28.   
  29. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  30.      success: function(data){  
  31.           for (var i = 0; i < data.list.length; i++) {  
  32.                $(".mui-slider-group").append(  
  33.                     '<div class="mui-slider-item" ><img src="'+ data.list[i].picUrl + '"> </div>'  
  34.                );  
  35.           }  
  36.   
  37.           mui("#slider").slider({  
  38.                interval: 3000  
  39.           });  
  40.      }  
  41.   
  42. });  
  43.  
此问题由VUE及MUI的技术版主解答了，较常见，用nextTick就解决了。
 
代码如下：
XML/HTML代码
  1. vm_slide.$nextTick(function () {  
  2.  // DOM 现在更新了  
  3.  mui("#slider").slider({  
  4.  interval: 3000  
  5.  });  
  6. })  
 

 

Tags: mui vue slider ajax

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 29722